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以下字体。