使用rem进行页面适配

想到写这个博客的时候，网上很多已经在吵着都2019了，还在用rem，都在用vw，emmm

1.rem的原理

众所周知rem的原理就是，值根据html根元素的大小而定，改变html的font-size大小便可改变元素的大小。

2.原理大家都一样，主要在动态改变html的font-size大小时，每个人的习惯不太一样。

网上有很多类似的博客，方法也很多

1.使用媒体查询，类似这种

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

2.借助sass,less等，类似这种

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@px){
    @return @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
    height: px2rem(240);
}
//less翻译结果：
.container {
    height: 3.2rem;
}　　

同时也要借助js动态设置html的font-size

let deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
  
window.onresize = function(){
   let deviceWidth = document.documentElement.clientWidth;
   document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};

3.用工具，webpack，postcss,postcss-pxtorem

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

但配置好后，依然需要js来动态改变html的font-size

4.借助插件https://github.com/imochen/hotcss

不管哪种方法，所基于的原理都是一样的，最后说下自己最常用的方法

css的calc和js

html{
    font-size: calc(100vw / 7.5);
}

let deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
  
window.onresize = function(){
   let deviceWidth = document.documentElement.clientWidth;
   document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};　　

此时设计稿大小为750px，用/100的方式可以很容易进行rem的换算，几乎不需要借助其他工具，直接设计稿大小除以100即可，并不觉得麻烦，所以一直在用