頁(yè)面自適應(yīng)與rem

在寫前端頁(yè)面的時(shí)候經(jīng)常會(huì)用到rem,也在網(wǎng)上看了別人對(duì)rem的介紹，詳細(xì)的情況就不在此描述，只說(shuō)一下我對(duì)rem的看法和用法。

在我看來(lái)，rem 是一種相對(duì)的尺度，相對(duì)于根元素設(shè)置的font-size，比如：

html {
    font-size: 16px;
}

那么，在別的地方使用rem的時(shí)候 1rem 就會(huì)等于 16px。
這算是對(duì)rem最基礎(chǔ)的應(yīng)用，但是這種使用方式和直接使用px沒(méi)有任何區(qū)別，只是單位不一樣，需要進(jìn)行換算。
既然rem 是一種相對(duì)尺度，最常用于頁(yè)面自適應(yīng)，我們就不能簡(jiǎn)單粗暴的直接對(duì)根元素設(shè)置字號(hào)來(lái)決定1rem的大小。
眾周所知，android手機(jī)屏幕大小不一，各種尺寸的都有，這樣的情況給我們的前端開發(fā)帶來(lái)了很大的麻煩，我們不可能針對(duì)每一種手機(jī)尺寸去寫一套代碼來(lái)進(jìn)行適應(yīng)。設(shè)計(jì)師也不可能針對(duì)每一種手機(jī)尺寸做一套設(shè)計(jì)標(biāo)注。
假設(shè)設(shè)計(jì)師做的圖以750px為寬度。我們?cè)趺茨茉谝惶自O(shè)計(jì)圖和一套代碼里去適應(yīng)所有的手機(jī)屏幕呢？這時(shí)候rem就非常有用了。
不知道別人公司是怎么用的，在我們公司針對(duì)rem做了一個(gè)轉(zhuǎn)換公式。

根字號(hào) = x * ( pageWith / 750 );

這里有幾個(gè)值需要解釋一下：

• x 這是一個(gè)自由的值，是你希望1rem能代表多少設(shè)計(jì)圖上的px，可以隨意設(shè)置
• pageWith 頁(yè)面實(shí)際尺寸 px
• 750 這個(gè)是設(shè)計(jì)圖的寬度
• 根字號(hào) 就是這個(gè)公式的計(jì)算結(jié)果，也是你將要使用的1rem所代表的px值。

這里還有一個(gè)地方要解釋一下，什么是設(shè)計(jì)圖上的px？ 比如設(shè)計(jì)圖寬度為750px,你希望1rem = 100px 那整個(gè)設(shè)計(jì)圖的寬度就可以寫做7.5rem，但這個(gè)100px只是針對(duì)于設(shè)計(jì)圖，因?yàn)閷?shí)際上手機(jī)的尺寸是不確定的。

啊~~~ 越說(shuō)越亂了，還是先解釋公式吧：

公式的意思是把真實(shí)的屏幕分成設(shè)計(jì)圖寬度的份數(shù)，乘以你希望1rem能代表多少設(shè)計(jì)圖上的Px，最終得到一個(gè)值，把這個(gè)值當(dāng)做根元素的字號(hào)，你的頁(yè)面中就可以完全使用rem，完全按照設(shè)計(jì)圖上的尺寸做界面，從而達(dá)到在不同手機(jī)屏幕下的自適應(yīng)。

不知道有沒(méi)有表達(dá)清楚我想表達(dá)的意思。還是上代碼吧，

var remUnit = 0;
function setRemUnit () {
    var doc = document.documentElement;
    var width = doc.clientWidth;
    remUnit = 100 * (width / 750);
    doc.style.fontSize = remUnit + 'px';
}

window.addEventListener('resize', setRemUnit);
setRemUnit();

這段代碼意思是以設(shè)計(jì)圖寬度750px為基準(zhǔn)，以期望1rem=100px為前提，計(jì)算出一個(gè)值，設(shè)置到根元素上。
使用時(shí)可以這樣用：
比如設(shè)計(jì)圖上有一個(gè)div 寬度為300px,div內(nèi)有一個(gè)頭像 寬度120px,頭像右側(cè)是用戶名，32號(hào)字，我們可以這樣寫：

.avatar-block {
    width: 3rem;
    ....
    .avatar {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        ...
    }
    .username {
        font-size: 0.32rem;
        ...
    }
}

因?yàn)槠聊皇遣还潭ǖ?，所以在不同屏幕下，通過(guò)計(jì)算得到的根元素字號(hào)也是跟著屏幕大小變化而變化的，所以才能做到一套設(shè)計(jì)圖一套代碼 就能適應(yīng)所有屏幕。
完