rem布局

作者: 代艳霞 | 来源:发表于2020-04-14 18:50 被阅读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);
    
    • 如何根据设计稿大小,用rem实现布局,很简单,只需要把上面代码k的值,修改你的设计稿大小就可以了:
      var k = 750; //设计稿大小
    

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

    相关文章

      网友评论

        本文标题:rem布局

        本文链接:https://www.haomeiwen.com/subject/jkncmhtx.html