rem是什么？

發(fā)布時(shí)間：2017-03-18 17:55:10

發(fā)布者：jiangbing

瀏覽量:

rem是指相對于根元素的字體大小的單位。

簡單的說它就是一個(gè)相對單位?？吹絩em大家一定會(huì)想起em單位，em是指相對于父元素的字體大小的單位。

區(qū)別：它們之間其實(shí)很相似，只不過一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。

那么rem是如何工作的呢？前面說rem是通過根元素進(jìn)行適配的，網(wǎng)頁中的根元素指的是html，我們通過設(shè)置html的字體大小就可以控制rem的大小。舉個(gè)例子：

  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;
    }

上面代碼結(jié)果按鈕大小如下圖：

我把html設(shè)置成20px是為了方便我們計(jì)算，為什么6rem等于60px。如果這個(gè)時(shí)候我們的.btn的樣式不變，我們再改變html的font-size的值，看看按鈕發(fā)生上面變化:

html{
    font-size:40px;
}

按鈕大小結(jié)果如下：

上面的width，height變成了上面結(jié)果的兩倍，我們只改變了html的font-size，但.btn樣式的width,height的rem設(shè)置的屬性不變的情況下就改變了按鈕在web中的大小。

其實(shí)從上面兩個(gè)案例中我們就可以計(jì)算出1px多少rem:

第一個(gè)例子：

120px = 6rem * 20px(根元素設(shè)置大值)

第二個(gè)例子：

240px = 6rem * 40px(根元素設(shè)置大值)

推算出：

10px = 1rem 在根元素（font-size = 10px的時(shí)候）；

20px = 1rem 在根元素（font-size = 20px的時(shí)候）；

40px = 1rem 在根元素（font-size = 40px的時(shí)候）；

在上面兩個(gè)例子中我們發(fā)現(xiàn)第一個(gè)案例按鈕是等比例放大到第二個(gè)按鈕，html font-size的改變就會(huì)導(dǎo)致按鈕的大小發(fā)生改變，我們并不需要改變先前給按鈕設(shè)置的寬度和高度，其實(shí)這就是我們最想看到的，我們知道改變html的font-size可以等比改變所有用了rem單位的元素，所以大家可以通過chrome瀏覽器的調(diào)試工具去切換第三個(gè)的demo在不同設(shè)備下的展示效果，或者通過縮放瀏覽器的寬度來查看效果，我們可以看到不管在任何分辨率下，頁面的排版都是按照等比例進(jìn)行切換，并且布局沒有亂。

當(dāng)然你也要借助媒體查詢來實(shí)現(xiàn)上面的功能，例如下面這樣：

 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; 
        }
    }