//屏幕适应
(function (win, doc) {
if (!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
var html = document.documentElement;
var k = 750; //设计稿大小
html.style.fontSize = html.clientWidth / k * 100 + "px";
}
setFont();
doc.addEventListener('DOMContentLoaded', setFont, false);
win.addEventListener('resize', setFont, false);
win.addEventListener('load', setFont, false);
})(window, document);
- 如何根据设计稿大小,用
rem
实现布局,很简单,只需要把上面代码k
的值,修改你的设计稿大小就可以了:
var k = 750; //设计稿大小
假如说,此时你的设计稿大小是
750px
宽,页面有一个元素的大小是350px
,换算成rem
来写的话,那它的宽度就是实际宽度,再除以100
也就是3.5rem
,其他元素雷同,如此就可以轻松写我们的移动端页面了。
网友评论