meta视口标签 物理像素开发像素 多倍图 背景缩放 移动端技术css初始化

语法：

<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<