移动端布局方式

1、手机移动端必须添加媒体查询标签：

meta 标签

属性1：name=“viewport”

属性2：content

属性值1：width=device-width

属性值2：initial-scale=1

属性值3：缩放最小倍数

minimum-scale=1

属性值4：缩放最大倍数

maximum-scale=1

属性值5：禁止用户缩放

user-scalable=no

即：

<meta neme="viewport"

content="width=device-width,

initial-scale=1,minimum-scale=1,

maximum-scale=1,user-scalable=no"

2、rem配合vw布局

2.1、常用字体大小：

12px、14px、16px

若html，body中字体大小 font-size：12px，

则1rem=12px，rem相对于根元素。

2.2、rem对应的移动端是逻辑像素。

2.3、手机端的高度可以固定，宽度能用百分比来表示

像一些按钮，基本上是用百分比表示宽度，

固定宽度的图标则用rem固定。

3、使用rem应注意事项

3.1、做出来的效果与效果图有偏差

原因：各种浏览器对小数值处理不同，换算rem与px对小数点处理有偏差。

3.2、精灵图定位

rem换算px的尺寸非常严格精确，

若图标之间间距过小，则图标过界

因此图与图之间的间距需留足够大。

3.3、rem单位最好不用在pc端

有些pc端浏览器不能识别12px以下字体。