大字标明,下面的链接是大神的博客,是我看过最详尽、最透彻讲解移动端页面开发的好文章
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中最大的那个。