rem自适应原理

需要了解的知识

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)
    原文作者:会跳舞的小惆怅
    原文地址: https://segmentfault.com/a/1190000020110087
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞