美文网首页
通用移动端REM适配

通用移动端REM适配

作者: 炸鱼Rovy | 来源:发表于2017-06-07 11:51 被阅读0次

    移动端适配方法比较多,最钟爱的还是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>
    

    相关文章

      网友评论

          本文标题:通用移动端REM适配

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