H5移动的适配方案
rem
rem适配方案是兼容性比较好的移动端适配方案，rem支持大部分的移动端系统和机型。
rem是相对于根元素的字体大小的单位。本质上就是一个相对单位，和em的区别是：em是依赖父元素的字体来计算，rem是依赖根元素的字体来计算。
rem适配的原理：把px单位换算为rem单位，然后根据屏幕大小动态设置根元素HTML的字体大小，这样实现在不同屏幕下适配的目的。
动态设置根元素的font-size
使用浏览器浏览网页，HTML的字体大小默认值是由浏览器来决定的，比如有的浏览器默认字体大小为16px，那么16px等于1rem。
在实际开发中，我们都是根据屏幕的宽度来动态设置。
动态设置有两种方式：
一、通过媒体查询来动态设置：
@media screen and (min-width:461px) {
html {
font-size: 16px;
}
}
@media screen and (max-width:460px) and (min-width:401px) {
html {
font-size: 20px;
}
}
@media screen and (max-width:400px) {
html {
font-size: 26px;
}
}二、使用JavaScript动态设置html的font-size，代码如下：
<script>
window.addEventListener("resize",function(){
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlDom /10 +'px';
})
</script>rem的计算
根据上面的计算公司，我们可以拿到rem的基准值，比如一个机型的屏幕宽度为375px【由Chrome浏览器上DevTools中的Device Mode得到】，那么rem的基准值就是37.5
如果我们的H5样式是使用Sass的话，就可以定义计算公式：
@function pxTorem($px){
$rem:37.5;
$return ($px / $rem) + rem
}
.brn{
width: pxTorem(200);
height:pxTorem(600)
}这就是在某个场景下，rem的计算方式。