所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示

 

　　原理：通过设置  , 将所有设备布局视口的宽度调整为设计图的宽度。

 

　　rem：CSS的长度单位， 根元素字体大小的倍数，只有根元素字体大小有关； html 中的根元素即 html 元素。

 

　　大部分浏览器的默认字体大小都是16px，所以1rem=16px；

 

　　rem适配原理：

 

　　长度单位都是用 rem 设置

 

　　当屏幕尺寸改变时，只需要修改 html 元素的  即可实现等比适配

 

　　我们在制作页面的时候，只考虑跟设计稿相同的屏幕尺寸即可，其他尺寸屏幕自动适配

 

　　这里我们计算当前屏幕的宽度与设计稿比后用比例scale乘上100，是因为rem都是基于font-size值设置的，100便于计算，值可以为任意数，比如10，但是Chrome中最小为12，所以这里选择用100；

 

　　比如某个元素，设计稿设计宽度为 640px， 我们需要在css中设置

 

　　比如某个元素，设计稿设计字体大小是 16px， 我们需要在css中设置

 

　　从而达到rem适配。

 

　　js获取当前屏幕的宽度，将屏幕宽度的16分之一设置给html的font-size

 

　　如果此时设计稿中的16可以为任意值，你设置多少，js中屏幕宽度就除于多少再赋值给html的font-size。

 

　　若设计稿中的某元素设置宽高为200px

 

　　此时可以替换为：

 

　　分析：

 

　　设计稿中的元素尺寸都是基于设计稿的宽度而定，如上述，200px的宽度是基于设计稿375px而定的，但当js中获取的宽度发生改变时，需要解决适配问题。假设js中获取的此时屏幕宽度为750px，那么此时html的font-size值为750/16 px；

 

　　此时计算box的width为400px

 

　　注：1rem=1 html的font-size

 

　　此方法不需要进行单位数值的计算，只需要定义一个less变量，再查找替换将单位px换成 /@rem 即可。

 

　　这种方法跟第四种雷同，但不需要再在less中定义变量，只需要进行js获取配合查找替换px即可。

 

　　分析：

 

　　这种方法是js动态获取屏幕宽度，直接将html的font-size设置为屏幕的宽度，再在less中进行换算。

 

　　若此时js获取的屏幕宽度为750px，html的font-size值设置为750px后，此时计算box的width为400px