通用移动端REM适配

移动端适配方法比较多,最钟爱的还是REM适配,通过js改变font-size的数值。

注:对于部分机型(如Nexus5、荣耀X4等)对于REM计算有偏差,比如fons-size设置为设置100px,通过getComputedStyle获取到的值为85px,需要对这种情况进行校正。

  <script>
    // 适配js
    (function () {
        function get() {
            var size = window.getComputedStyle(document.documentElement, null).getPropertyValue("font-size");
            return parseFloat(size);
        }
        function set(size) {
            document.documentElement.style.fontSize = size + "px";
        }
        // 720是设计稿尺寸,100为基数,例如:设计稿中某元素为100px,CSS中是1rem
        var size = 100 * (window.innerWidth / 720);
        set(size);
        // 校正html字体大小
        function fix() {
            var target = 100 * (window.innerWidth / 720).toFixed(4);
            var current = get().toFixed(4);
            if (current != target) {
                var size = target * (target / current);
                set(size)
            }
        }
        fix();
    })();   
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容