移动端自适应布局的最好工具-rem

提到rem,大家首先会想到的是em/px/pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦

先看看兼容性,关于移动端:

ios:6.1系统以上都支持

android:2.1系统以上都支持

基本上主流浏览器都支持,可以安心的往下看了

rem设置字体大小
rem是(font size of the root element),意思就是根据网页的根元素来设置字体大小,和em(font size of the element)的区别是:em是根据其父元素的字体大小来设置,而rem是根据网页的根元素(html)来设置字体大小的,举一个简单的例子

现在大部分浏览器IE9+/Firefox/Chrome/Safari/Opera,如果我们不修改相关的字体配置,都是默认显示font-size是16px即

html {
font-size:16px;
}
那么如果我们想给一个P标签设置12px的字体大小那么用rem来写就是

p {
font-size:0.75rem; //12÷16=0.75(rem)
}
基本上使用rem这个单位来设置字体大小基本上是这个套路,好处是假如用户自己修改了浏览器的默认字体大小,那么使用rem时就可以根据用户的调整的大小来显示了;但是rem不仅可以适用于字体,同样可以用于width/height/margin这些样式的单位;下面来具体说一下

rem进行屏幕适配
在讲rem屏幕适配之前,先说一下之前做移动端适配的方法,一般可以分为:

1.简单一点的页面:一般高度直接设置成固定值,宽度一般撑满整个屏幕

2.稍复杂一些的是利用百分比设置元素的大小来进行适配,或者利用弹性布局flex等css去设置一些需要定制的宽度

3.再复杂一些的响应式页面,需要利用css3的media query属性来进行适配,大致思路是根据屏幕不同大小来设置对应的css样式

上面的一些方法其实也可以解决屏幕适配等问题,但这里主要介绍的是我在目前工作过程中认为兼容性最好的布局方案——rem(什么是rem)布局:

rem适配
< style>
.con {
width: 10rem; height: 10rem; background-color: red;
}
< /style>
< div class="con">< /div>
这是一个div,宽度和高度都用rem来设置了;在浏览器里面width和height分别是160px,正好是16px*10,那么如果将html根元素的默认font-size修改一下呢?

< style>
html {
font-size: 17px;
}
.con {
width: 10rem; height: 10rem; background-color: red;
}
< /style>
< div class="con">< /div>
再来看结果:这时width和height都是170px,这就说明了将rem应用于width和height时同样适用rem的特性,根据根元素的font-size值来改变自身的值,由此我们应该可以联想到我们可以给html设定不同的值,从而达到我们css样式中的适配效果

我有几张阿里云幸运券分享给你，用券购买或者升级阿里云相应产品会有特惠惊喜哦！把想要买的产品的幸运券都领走吧！快下手，马上就要抢光了。
rem数值计算
如果利用rem来设置css的值,一般要通过一层计算才行,比如如果要设置一个长宽为100px的div,那么就需要计算出100px对应的rem值是100/16=6.25rem,这在我们写css中其实算比较繁琐的一步操作了,
对于没有使用sass的工程:

为了方便起见,可以将html的font-size设置成100px/10px,这样在写单位时,直接将数值除以100/10px在加上rem的单位就可以了

对于使用sass的工程:

前端构建中,完全可以利用scss来解决这个问题,例如我们可以写一个scss的function px2rem即:

@function px2rem($px){
$rem : 37.5px;
@return ($px/$rem) + rem;
}
这样当我们写具体数值的时候就可以写成:

height: px2rem(90px);
width: px2rem(90px);
这里你可能会发现一些不理解的地方,就是上面那个$rem:37.5px是怎么来的,正常情况下不是默认的16px么,这个其实就是页面的基准值,和html的font-size有关:
原文链接