移动端适配

---

一、viewport 适配

1. 拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后量尺寸进行布局即可。

	<meta name="viewport" content="width=设计稿宽度">

2. 元素大小在不同移动设备上会等比缩放。
3. 缺点：
   兼容性问题

二、rem 适配

• em 和 rem ：
  em 参照的是父级元素的字体大小，1em = 1 父元素的 font-size
  rem 参照的是根元素的字体大小，1rem = 1 html的 font-size
• rem 适配策略：核心是等比缩放。直接使用rem 进行适配，有两种方法，先在一个页面中进行布局，然后通过JS 适配不同屏幕。

rem 适配方法一

1. 设置完美视口
2. 假如在设计稿宽度为375 的页面中，设置html 的font-size =100px
3. 设置页面元素的大小，单位转化为 rem
4. 增加 JS 代码进行页面适配，设置不同设备的font-size 。
   其他移动设备中，html 的 font-size=设备布局视口宽度 * 100 / 375 px
   

rem 适配方法二

1. 设置完美视口
2. 设置html 的 font-size 为与设计稿宽度成比例的值，如采用 10 : 1 (即布局视口宽度 : font-size = 10 : 1)的比例，设计稿宽度 375时，font-size =37.5px
3. 设置页面元素大小，转化为 rem 单位
4. 通过 JS 代码进行页面适配，设置不同屏幕的 font-size 。
   其他设备中，html 的 font-size=设备布局视口宽度 / 10 px
   

三、less + rem 适配

• 适配策略：采用成比例尺寸的font-size 的适配策略。

1. 设置完美视口
2. 通过 JS 进行页面适配，设置不同屏幕html 的font-size 值。
   font-size=布局视口宽度 / 比例值，假定采用比例10 : 1
   
3. 在less 中定义变量 @font-size 表示html的 font-size，@font-size=(375 / 10 rem)（这里的“ rem ”只表示单位，与font-size 无关）
4. less 中设置元素样式，并转换为rem 单位，大小=原本大小 / @font-size 。

注意：less 语言中除法要加括号，如@font-size=(375/100rem)，width=(375/@font-size)

（完）