女猿1024

rem布局

2020-04-14  本文已影响0人  代艳霞
//屏幕适应
(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);
  var k = 750; //设计稿大小

假如说,此时你的设计稿大小是750px宽,页面有一个元素的大小是350px,换算成rem来写的话,那它的宽度就是实际宽度,再除以100也就是3.5rem,其他元素雷同,如此就可以轻松写我们的移动端页面了。

上一篇下一篇

猜你喜欢

热点阅读