快速理解移动端REM适配方案

我写这篇文章的时间是2020年,为什么要写上时间,因为我们知道前端技术更新的很快,可能过几年这篇文章里面介绍的技术就淘汰了。
目前主流的移动端适配方案有2种:媒体查询和rem。
不过媒体查询的方式更适合做响应式布局,所以从2017至今,移动端的设配方案就是使用rem。通常VUE项目中会安装flexible和postcss-px2rem两个插件来自动计算。
我相信有的人只是会用这2个插件,但是还没有认真了解过其原理。下面我就用最简短的说明来介绍一下其中的原理,帮助您快速理解。

首先我们知道rem是相对于html根元素的单位,默认情况html的font-size是16px,所以 1rem = 16px;

那么得出来,pc端设计稿的话如果30px换成rem的公式就是 30/16=1.8rem(目标单位/根字体单位);

为了适配不同的屏幕大小,在不同大小的屏幕上面,字体也要随着改变,所以我们不能只用16px,而需要动态的设定根字体的单位;

例如现在移动端的设计稿普遍使用ihpone6作为标准,也就是宽度为375,为了计算方便,首先用js写一个函数把html的字体单位设为375/10,也就是37.5,像这样:

let htmlDom = document.getElementsByTagName('html')[0]
let setFontSize = function () {
let htmlWidth = document.documentElement.clientWidth //(viewport宽度)
htmlDom.style.fontSize = htmlWidth / 10 + 'px' //iphone6=37.5
}
setFontSize()

具备了动态改变根字体的能力,只要给文字或者容器宽高的值设定rem就可以实现适配了;

那么根据设计稿的要求我们具体应该设置多少rem呢?这里有个公式,也非常简单,就是设计稿标注的像素值除以根字体的值就得出了rem的值;

基于iPhone6的设计稿某个文字标注30px。那么它的rem值 就是30/37.5 = 0.8rem。 所以在css中的字体大小就要写.8rem。

看到这里,大家可以尝试一下在chrome的调试看看,不过要注意一点就是,iphone6的屏幕是2x屏,所以在算rem的时候需要把30px看做30/2也就是15px,然后再用15/37.5。现在业界已经默认都使用Iphone6最为移动端UI的标准了。

但是每次写rem之前都得自己用计算器除一次也太麻烦了,所以我们可以写一个scss的函数来帮我们这样就方便很多,例如像下面这样使用。

@function px2rem($px) {
$rem: 37.5px; //iphone 6
@return ($px/$rem) + rem;
}
.box {
font-size: px2rem(15px);
}

为了方便编译scss文件,可以使用webpack来打包编译或则其他方式。

最后我写了一个小极简的demo,大家可以下载到本地运行一下加深理解。

https://github.com/yjxf8285/rem-demo

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:95 次浏览