wordpress程序员博客主题昆明seo网站管理

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的计算方式。