移动端适配
一、viewport 适配
- 拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后量尺寸进行布局即可。
<meta name="viewport" content="width=设计稿宽度">
- 元素大小在不同移动设备上会等比缩放。
- 缺点：
兼容性问题
二、rem 适配
- em 和 rem ：
em 参照的是父级元素的字体大小，1em = 1 父元素的 font-size
rem 参照的是根元素的字体大小，1rem = 1 html的 font-size - rem 适配策略：核心是等比缩放。直接使用rem 进行适配，有两种方法，先在一个页面中进行布局，然后通过JS 适配不同屏幕。
rem 适配方法一
- 设置完美视口
- 假如在设计稿宽度为375 的页面中，设置html 的font-size =100px
- 设置页面元素的大小，单位转化为 rem
- 增加 JS 代码进行页面适配，设置不同设备的font-size 。
其他移动设备中，html 的 font-size=设备布局视口宽度 * 100 / 375 px
rem 适配方法二
- 设置完美视口
- 设置html 的 font-size 为与设计稿宽度成比例的值，如采用 10 : 1 (即布局视口宽度 : font-size = 10 : 1)的比例，设计稿宽度 375时，font-size =37.5px
- 设置页面元素大小，转化为 rem 单位
- 通过 JS 代码进行页面适配，设置不同屏幕的 font-size 。
其他设备中，html 的 font-size=设备布局视口宽度 / 10 px
三、less + rem 适配
- 适配策略：采用成比例尺寸的font-size 的适配策略。
- 设置完美视口
- 通过 JS 进行页面适配，设置不同屏幕html 的font-size 值。
font-size=布局视口宽度 / 比例值，假定采用比例10 : 1 - 在less 中定义变量 @font-size 表示html的 font-size，@font-size=(375 / 10 rem)（这里的“ rem ”只表示单位，与font-size 无关）
- less 中设置元素样式，并转换为rem 单位，大小=原本大小 / @font-size 。
注意：less 语言中除法要加括号，如@font-size=(375/100rem)，width=(375/@font-size)
（完）