页面中使用的rem单位是相对于’html’这个根节点的作为参考,默认的情况下html的字体大小16x,在什么也不做处理的情况下,页面中如果使用了rem,那么这时候的1rem表示的就是1*16 = 16px; 2rem表示的就是32px的大小;在写手机端页面时封装的rem自适应js文件如下:
<script>
//这个js里面设置rem实现自适应的布局,1rem = 100px;
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){//如果页面的宽度大于640px,那么html的font-size:100px,页面中1rem就表示100px的大小
docEl.style.fontSize = '100px';
}else{//如果页面是小于640px,那么html字体的大小为屏幕的宽度除以设计稿的宽度再乘以100
//1 由于我们所写出的页面是要在不同的屏幕大小设备上运行的
//2 所以我们在写样式的时候必须要先已一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定
//3 假如我们拿到的视觉稿是以iphone6的屏幕为基准设计的
//4 iPhone6的屏幕大小是375px 375*2dpr= 640px,
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
参考链接:https://www.jianshu.com/p/09bd0ca51ef5
https://www.jianshu.com/p/b00cd3506782