移动端REM适配的几种方法
一、网易采用的方式
步骤：
- 根据设计稿尺寸完成页面；
- 设置meta，控制视口宽度，让页面以1:1比例渲染页面
- 动态设置html的font-size；
- 把各元素的px值除以100转换为rem（字体除外）
关键代码
设置视口：
- 给meta设置这些属性：
name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1"
动态设置html的font-size：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
此以设计稿为750px物理分辨率为基准，1rem=100px，所以屏幕不管多大，横屏都为7.5rem，document.documentElement.clientWidth获取屏幕宽度，屏幕固定为7.5rem，那么，1rem=document.documentElement.clientWidth / 7.5+px，动态改变根字体大小，为1rem的px值，所以设计稿中的25px=0.25rem
二、淘宝使用的flexible.js
1、拿到设计稿除以10，得到font-size基准值
flexible中把一个横屏分为10rem，比如屏幕750px，1rem=750/10=75px
2、引入flexible
3、不要设置meta的viewport缩放值
4、设计稿px/ font-size基准值，即可换算为rem
优：通过动态根font-size、viewpor、dpr来做适配，无兼容性问题，适配精准。
劣：需要根据设计稿进行基准值换算，在不使用sublime text编辑器插件开发时，单位计算复杂。
三、用css3新属性
html{
font-size: calc(100vw/7.5);
}
接下来可以
h2{ font-size:0.24rem; }
p{ font-size: 0.2rem; }
通篇均以设计稿为750px物理分辨率为基准
到底用哪种换算方案呢？
每个人评判的标准不同。但个人更倾向flexible，动态计算viewport和针对iphone手机的dpr缩放使得页面适配更加精确，而且手淘页面用户访问量比网易页面大很多。
移动端有用px的时候吗？
有。当你的页面图片或者某一元素比例要固定，不想进行任何缩放时，rem就不适合了，这时候用px单位，能保证该元素不会因缩放而失真模糊。**
参考博文：https://www.cnblogs.com/annie211/p/8118857.html
仅做笔记，如有问题请留言，谢谢