大字标明，下面的链接是大神的博客，是我看过最详尽、最透彻讲解移动端页面开发的好文章
mark一下，放在自己的日志里面更容易以后查找
搬运一下结论
rem布局的两种方案
1.淘宝方案
step1 设置缩放（dpr的倒数），让布局视口===设备宽度
let scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name=viewport]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
step2 把设备宽度10等分，设置html的font-size,即1rem
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
step3 计算元素的rem宽度，以200px为例
元素rem宽度 = 200px / 上一步的根元素字体大小
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="" />
</head>
<body>
<script>
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
</script>
</body>
</html>
2.网易方案
思路：（以iphone6为例）不缩放，保留理想的布局视口像素(375px)和设备像素(750px)之间的差距，即dpr
将设计图按1rem = 100px分割，以750px的设计图为例，宽度是7.5rem;
令实际布局视口的宽度也为7.5rem，但布局视口与设备像素是有差距的，所以布局视口中，1rem !== 100px，需要动态计算
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
即布局视口的1rem = document.documentElement.clientWidth / 7.5 + 'px';
当我们根据设计图写页面的时候，元素rem宽度 = 元素的设计图尺寸 / 100px
比如200px即为2rem
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
</body>
</html>
PS：
公式成立的大前提：（缩放比例为1）
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
布局视口的宽度：document.documentElement.clientWidth
字体不要用rem 用媒体查询
更新：安卓4.4以上可以使用vw vh
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。