rem自适应屏幕尺寸

645 阅读1分钟

rem单位是指相对于根元素的字体大小的单位,也就是比如我定义:

html{ font-size:14px}

那么如引用.test-box font-size/width/height 设为2rem的话就相当于 2*14px。也就是

.test-box{
        font-size:2rem;
       /*font-size:28px; 即:2倍的根元素字体大小*/
}

那么,所有的网页元素,只要css单位采用的是rem,即可根据html根元素字体大小进行动态改变。 只要根据屏幕宽度设置html元素的font-size即可。

 <!--初始化rem-->

        ! function(a) {

            function b() {

                var b = a.document,

                    c = b.documentElement,

                    d = c.getBoundingClientRect().width;

                document.documentElement.style.fontSize = 20 * (d / 360) + "px"

            }

            window.addEventListener("DOMContentLoaded", function() {

                b()

            }, !1), window.addEventListener("resize", function() {

                b()

            }), b()

        }(window);