最佳移动端响应式布局神器： 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有关:

rem基准值计算

关于rem的基准值,也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的,主要有以下几点原因:

1.由于我们所写出的页面是要在不同的屏幕大小设备上运行的,所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定;假如我们拿到的视觉稿是以iphone6的屏幕width=375px为基准:

ar docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;

这样计算出来的rem基准值就是37.5(iphone6的视觉稿),这里为什么要除以10呢,其实这个值是随便定义的,因为不想让html的font-size太大,当然也可以选择不除,只要在后面动态js计算时保证一样的值就可以

动态设置html的font-size

现在关键问题来了,我们该如何通过不同的屏幕去动态设置html的font-size呢,这里一般分为两种办法:

1.利用css的media query来设置:

@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
      html{font-size: 37.5px;}
}

2.利用javascript来动态设置,根据我们之前算出的基准值,我们可以利用js动态算出当前屏幕所适配的font-size:

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

由此可见我们可以通过设置不同的html基础值来达到在不同页面适配的目的,当然在使用js来设置时,需要绑定页面的resize事件来达到变化时更新html的font-size

rem适配进阶

一般我们获取到的视觉稿大部分是iphone6的,所以我们看到的尺寸一般是双倍大小的,在使用rem之前我们一般会自觉的将标注/2其实这也并非没有道理;但是当我们配合rem使用时,完全可以按照视觉稿上的尺寸来设置

1.设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏,也即是设备像素比(device pixel ratio)dpr比较大,所以显示的像素较为清晰

2.一般手机的dpr是1,iphone4，iphone5这种高清屏是2,iphone6s plus这种高清屏是3,可以通过js的window.devicePixelRatio获取到当前设备的dpr,所以iphone6给的视觉稿大小是(*2) 750×1334了

3.拿到dpr后,我们就可以在viewport meta头取消让浏览器自动缩放页面,而自己去设置viewport的content例如(这里之所以要设置viewport是因为我们要实现border:1px的效果,假如我给border设置了1px,在scale的影响下,高清屏中就会显示成0.5px的效果)

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

4.设置完之后配合rem修改

@function px2rem($px){
    $rem : 75px;
    @return ($px/$rem) + rem;
}

rem布局中需要引入的完整js代码

({
  resetRem:function(){
    this.setRem();
    this.on();
  },
  setRem:function(){
    var me = this;
    var rect = window.document.documentElement.getBoundingClientRect();
    var width = rect.width > 750 ? 750 : rect.width;
    window.rootEm = parseFloat(width / 320 * 20);
    document.getElementsByTagName('html')[0].style.fontSize = rootEm + "px";  
  },
  on:function(){
    var me = this;
    window.onresize = function() {
      window.setTimeout(me.setRem, 300);
    }   
  }
})();

假设设计稿是:750px,则$rem=750/320*20=46.875;

感悟：不管男人女人，都一定要经济独立