rem自适应原理

jiezi

5 年前

html{font-size:16px}
p{font-size:1rem}
1rem = 16px;

rem 和 em 类似，em 相较于父元素的字体大小，而 rem 相较于 html 的字体大小；

有了这个以上的前提可以通过监测屏幕大小改变 html 的字体大小，从而实现自适应大小的效果；

获取设备宽度与设计稿宽度的比例作为 html font-size 的大小；
假如是 750/750 那么 font-size：1px; 设计稿上 200px, 代码就要写 200rem; 这样写太大.
通常 750/750*100, 多除 100；100 作为 px 转化为 rem 的换算比例，100px = 1rem; 那么设计稿 750px 代码里就要写 7.5rem;

function getRem () {var html = document.getElementsByTagName("html")[0];
    var  deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
    var rem = deviceWidth / designWidth * 100;
    console.log(rem)
    html.style.fontSize = rem+ "px";
}

设计稿为 750px 时，html{font-size:50px;} 50px * 7.5 = 375px; 正好是设备的宽度；
当设计稿 750px, 设备 320px 时，320/750100 = 42.6666667;42.66667 7.5 = 320px;
所以当设备为 375 时 7.5rem 是 maxWidth, 设备是 320 时，7.5rem 也是 maxWidth，这样就达到了自适应设备的目的；

 (function (designWidth,n) {function getRem () {var html = document.getElementsByTagName("html")[0];
        var  deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
        var rem = deviceWidth / designWidth * n;
        console.log(rem)
        html.style.fontSize = rem+ "px";
    }
    getRem ()
    window.addEventListener('resize',function (){getRem()
    })

})(750,100)

rem自适应原理

需要了解的知识

实现原理

简陋版完整代码：