关于rem

随着web app的兴起，rem这是个低调的css单位，近一两年开始崭露头角，有许多朋友对于它的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我认为rem是用来做web app它绝对是最合适的人选之一。
–引自”段亮博客”

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。
简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。
区别：它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

为什么web app要使用rem？

传统的解决方式的利弊:

  • 流式布局(例如携程/亚马逊)
    他们在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。
    流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。
  • 固定宽度做法
    还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的，但近期改版了，采用了rem。
  • 响应式做法
    响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。
  • 设置viewport进行缩放
    天猫的web app的首页就是采用这种方式去做的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。 
    1
    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案，接下来讲下rem是如何工作的。
前面我们说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;
}

把html设置成10px是为了方便我们计算，为什么6rem等于60px。如果这个时候我们的.btn的样式不变，我们再改变html的font-size的值，看看按钮发生上面变化:

1
2
3
html{
    font-size:40px;
}

按钮大小对比:

其实从上面两个案例中我们就可以计算出1px多少rem:
第一个例子：
120px = 6rem 20px(根元素设置大值)
第二个例子：
240px = 6rem 40px(根元素设置大值)
推算出：
10px = 1rem 在根元素（font-size = 10px的时候）；
20px = 1rem 在根元素（font-size = 20px的时候）；
40px = 1rem 在根元素（font-size = 40px的时候）；
在上面两个例子中我们发现第一个案例按钮是等比例放大到第二个按钮，html font-size的改变就会导致按钮的大小发生改变，我们并不需要改变先前给按钮设置的宽度和高度，其实这就是我们最想看到的，为什么这么说？接下来我们再来看一个例子：戳这里查看
由上面两个的demo中我们知道改变html的font-size可以等比改变所有用了rem单位的元素，所以大家可以通过chrome浏览器的调试工具去切换第三个的demo在不同设备下的展示效果，或者通过缩放浏览器的宽度来查看效果，我们可以看到不管在任何分辨率下，页面的排版都是按照等比例进行切换，并且布局没有乱。

怎么计算不同分辨率下font-size的值?

先看个表格

上面的表格蓝色一列是上面案列中页面的尺寸，页面是以640的宽度去切的，怎么计算不同宽度下font-site的值，大家看表格上面的数值变化应该能明白。举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。
那么回到技术上, 我们可以有两种方式来应用rem适配不同的设备

一是通过media query设置实现适配, 当然,这样是不能所有设备全适配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

一是使用JS(可以实现全适配,推荐使用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>        
    (function (doc, win) {    
        var docEl = doc.documentElement,    
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    
        recalc = function () {    
        var clientWidth = docEl.clientWidth;    
        if (!clientWidth) return;    
        docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };    
    if (!doc.addEventListener) return;    
    win.addEventListener(resizeEvt, recalc, false);    
    doc.addEventListener('DOMContentLoaded', recalc, false);    
    })(document, window);    
</script>

此外，并不是所有的浏览都支持rem单位，不过还好在移动端除了opera 8以外的所有移动浏览器都支持rem单位值，更多详情，请移步caniuse.com，浏览器对rem支持情况

blog
前端