rem

发表于   |   分类于

前言

做移动端适配用的比较多的就是使用rem作为单位了吧。本来在做web的时候使用的是px，然后又有em作为单位（这个单位我都不怎么用，太麻烦了），现在移动端的话，基本都是rem了。

em

em是一个相对的单位。这里的相对便是基于父元素的font-size来改变的。

举个例子：

1
2
3
4
5
<div id="one">
    hello
    <div id="one-one">world</div>
    <div id="one-two">world</div>
</div>
1
2
3
4
5
6
7
8
9
#one{
    font-size: 32px;
}
#one-one{
    font-size: 0.5em;
}
#one-two{
    font-size: 16px;
}

此时会发现两个world其实是一样大的。因此，我们可以一直使用父元素作为基准来设定font-size，这也决定了它的麻烦性，因为你需要一直去计算父元素转换过来的具体px是多少。那到了rem上场了。

rem

所谓的rem是指font size of the root element，即是根元素的字体大小，而这里的根元素，通常就是html。在html设置了具体的字体大小，然后我们便可以基于html来换算成rem了。举个例子（就用上个例子吧，把样式重写）：

1
2
3
4
5
<div id="one">
    hello
    <div id="one-one">world</div>
    <div id="one-two">world</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
html{
    font-size:50px;
}
#one{
    font-size: 0.5rem;
}
#one-one{
    font-size: 0.3rem;
}
#one-two{
    font-size: 15px;
}

因为根元素字体大小是50px，所以父元素#one字体大小是25px，#one-one字体大小是15px，我们会发现两个world是一样大的。

用处

那rem到底怎么用作适配呢？上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(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 = 100 * (clientWidth / 640) + 'px';
            //css默认body隐藏，加载完适配后展现
            doc.body.style.display="block";
        };
    if (!doc.addEventListener) return;
    //recalc();
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

因为不同手机的屏幕大小是不一样的，我们在一开始加载时，就执行该js，让其根据屏幕窗口大小，改变html的字体大小，然后我们便可以根据根元素字体的大小来设置css单位了。