rem 布局

<script>
    window.addEventListener('orientationchange', setRem);
    window.addEventListener('resize', setRem);
    setRem();
    function setRem() {
        var html = document.querySelector('html');
        var width = html.getBoundingClientRect().width;
        html.style.fontSize = width / 16 + 'px';
    };
</script>

<style>
    // sass写法
    @function rem($px) {
        @return $px / 46.875 + rem;
    }
    //less写法
    @rem: 46.875rem;
    //stylus自行解决
    ？
</style>

用法：
如：元素宽300px，高500px；
传入参数即可：width:rem(300); height:rem(500);

rem算法解释：
例如：
1，设计图是750；
2，屏幕宽度/16；
计算步骤：
第一步： 750/16 = 46.875，1rem = 46.875
第二步：比如logo图片宽度为240px，那么width应该写成5.12rem

原文：https://blog.youkuaiyun.com/weixin_43244655/article/details/84063046
版权声明：本文为博主原创文章，转载请附上博文链接！