语法:
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >
标准的viewport设置
设备宽度和设备保持一致 width=device-width 宽度为设备宽度
视口的默认缩放比例1.0 initial-scale=1.0 初始缩放比
不允许用户自行缩放 user-scalable=no" 用户是否可以缩放 Yes或no
最大允许缩放的比例为1.0 maximum-scale=1.0 最大缩放比
最小允许缩放的比例为1.0 minimum-scale=1. 0 最小缩放比
1开放像素=2物理像素(iphone8)
多倍图
2倍图
例:准备的图片放到手机屏幕上会进行缩放 50*50 放大后100*100
先写入100*100的图,限制宽高50*50,再放进手机屏幕,就不会模糊了
精灵图
在firework里面把精灵图等比例缩放为原来的一半
之后根据大小 测量坐标
注意代码 background-size也要写 精灵图原来宽度的一半
移动端CSS初始化 normalize.css
背景缩放 background-size
参数
宽度 高度
高度可省略,省略后为等比例缩放
单位为px,%(相对于父盒子而言)
cover 完全覆盖整个盒子,可能有部分背景显示不全
contain 高度宽度等比例拉伸,当高度宽度其中一个铺满div盒子就不再拉伸(可能会有部分显示空白)
背景图片2倍图 同多倍图 准备100*100照片,盒子50*50,背景缩放50*50