vue-h5移动Web的rem配置

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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二、使用JavaScript动态设置html的font-size，代码如下：

    <script>
      window.addEventListener("resize",function(){
        let htmlDom = document.getElementsByTagName('html')[0];
        htmlDom.style.fontSize = htmlDom /10 +'px';
      })
    </script>
1
2
3
4
5
6

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)
}
1
2
3
4
5
6
7
8
9

这就是在某个场景下，rem的计算方式。