移动端rem学习

rem： 用来替换px的单位，在页面根元素设置大小后，每个rem就是页面根元素的大小，例：

html {font-size: 12px;}
h1 { font-size: 2rem; } /* 2 × 12px = 24px */
p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */
div {width: 20rem;} /* 20 * 12px = 240px*/

rem和em的区别： rem是以根元素字体大小为基准，em是以父元素字体大小为基准（可以在本身元素上设置font-size为多少em来覆盖父元素的font-size）

rem的计算： 

一： js计算

const oHtml = document.getElementsByTagName('html')[0] // 获得html
const width = oHtml.clientWidth; // 获得页面宽度
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

二： 媒体查询

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}