html rem适配

rem 布局适配方案

主要方法为：

按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；

css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

设计稿中的字体使用 px 为单位，通过媒体查询稍作调整。

上代码

JS代码：


<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>

CSS代码：


<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