摘要：第一種情況也不討論了，通過斷點(diǎn)適配后，其實(shí)你處理的還是第二種情況。至于移動端，支持情況不錯，可以在生產(chǎn)環(huán)境使用。

css中的單位很多，%、px、em、rem，以及比較新的vw、vh等。每個單位都有特定的用途，比如當(dāng)需要設(shè)置一個矩形的寬高比為16:9，并且隨屏幕寬度自適應(yīng)時，除了用%，其他單位是很難做到的。所以不存在說某個單位是錯誤的，某個單位是最好的這種說法。

那本文說的頁面適配，指的是同樣的布局，在不同大小的屏幕上怎么進(jìn)行縮放、控制間距、寬高、字號等大小。

頁面適配的方式有很多：

使用px，結(jié)合Media Query進(jìn)行階梯式的適配；

使用%，按百分比自適應(yīng)布局；

使用rem，結(jié)合html元素的font-size來根據(jù)屏幕寬度適配；

使用vw、vh，直接根據(jù)視口寬高適配。

在這些大前提下，還需針對一些小的細(xì)節(jié)做微調(diào)。比如使用px的時候，可能在小屏幕中，要對某個容器進(jìn)行transform: scale(.8)，適當(dāng)縮小處理。使用rem的時候，需要固定頁面的左右間距為10px等。

所以對我來說，盡管網(wǎng)上曾對px、rem和em等單位的優(yōu)缺點(diǎn)爭論過很多，但我的觀點(diǎn)可能是，具體情況具體分析。有同學(xué)可能要炸了，你這跟沒說有啥區(qū)別？

對，我的意思跟開篇一樣，單論某個單位的好壞是沒意義的。我們最關(guān)注的是：什么場景中，使用什么單位最合適。

也不賣關(guān)子了，我就直接列一些自己覺得比較好的實(shí)踐方式，這些都是根據(jù)自己多年的開發(fā)經(jīng)驗(yàn)和大量的調(diào)研得到的結(jié)論：

在視覺稿要求固定尺寸的元素上使用px。比如1px線，4px的圓角邊框。

在字號、（大多數(shù)）間距上使用rem。

慎用em。

為什么我標(biāo)題沒提到%、vw、vh這幾個呢？這幾個都是按比例適配，只不過參考對象不一樣。

%是參考父容器，vw和vh是參考視口。他們的使用場景是非常固定的，比如上文提到的16:9的容器，除了用%，還有更合適的方式嗎？另外，1vw = 1%的視口寬度。所以就真正需要按視口大小適配的時候再用這個單位吧，使用場景相對固定。

接下來我會詳細(xì)介紹一下這3個結(jié)論的由來。

em會疊加計算。在這個機(jī)制下太容易犯錯了，因?yàn)槟悴恢肋@段css指定的字號具體是多少。

// HTML

    abc
    def
    abc


// CSS
span {font-size: 1.5em;}

實(shí)際的效果是這樣的：

先要搞清楚em的計算原理，它是根據(jù)當(dāng)前元素的字號按比例計算的。

外層span的字號是16px（瀏覽器默認(rèn)值），所以1.5em之后是24px。由于字號是繼承的，導(dǎo)致內(nèi)層span的字號繼承過來是24px，再經(jīng)過1.5em之后就成了36px。

所以，就算要用em的話，盡量不要用在繼承屬性（font-size）上，除非你真的清楚你在做什么！

比如你想根據(jù)字號自動調(diào)整字符間距，可以這么做：

.content {
    font-size: 1rem;
    letter-spacing: .03em;
}

但再仔細(xì)想一下，letter-spacing由.content的字號決定，而它又由html的字號決定。那為什么letter-spacing不直接用rem呢？

px是我比較喜歡的一個單位，簡單又直接。但理性驅(qū)使，還是要合理考慮使用場景。

px的性質(zhì)決定了它只能用于固定尺寸。也就是說，如果視覺設(shè)計師規(guī)定，這個邊框?qū)挾缺仨毷?b>2px。那這種情況下就不需要討論了。

除了固定尺寸用px，其他大部分情況都可以使用rem。

現(xiàn)在考慮一個實(shí)際的開發(fā)場景，一般來說都是先有視覺稿才能開發(fā)。兩種情況：一、假設(shè)視覺稿按iPhone 6和iPhone 6+，及其他尺寸各出了一份，那你就按照Media Query去適配。二、設(shè)計師只給你一種機(jī)型的視覺稿，以iPhone 6為例，750x1334，2倍屏下轉(zhuǎn)換后是375x667。

第一種情況也不討論了，通過Media Query斷點(diǎn)適配后，其實(shí)你處理的還是第二種情況。

那第二種的意思是，你要根據(jù)寬度為375px的稿子，擴(kuò)展到適配任意寬度的屏幕。（頁面高度跟業(yè)務(wù)有關(guān)，不用關(guān)心，寬度肯定是固定的）

接下來拿到視覺稿如下：

測量后主要參數(shù)如下：

頁面間距10px

文字間距10px，字號16px

A高度100px

B高度50px，上間距30px

很快就能寫出HTML結(jié)構(gòu)和CSS。

A. 第一段內(nèi)容
B. 第二段內(nèi)容

body {
    padding: 10px;
    background: #f6f0ee;
}

.box {
    padding: 10px;
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
}

.box-1 {
    height: 100px;
    background: #1daedc;
}

.box-2 {
    margin-top: 30px;
    height: 50px;
    background: #ddbe97;
}

完美符合要求。

然后視覺開始提要求了，大屏上要把字體放大、間距放大。

這時候的一個選擇是，問設(shè)計師是要適配哪種屏幕，字號是多少，間距是多少。技術(shù)上再通過Media Query微調(diào)。

@media(min-width: 414px) {
    // 這里不寫了，按視覺要求量化即可
}

另一個選擇可以反過來做。首先按rem作為字號、容器高度、外間距的單位。那么代碼可以改為：

html {
    font-size: 16px;
}

.box {
    font-size: 1rem;
}

.box-1 {
    height: 6.25rem;
}

.box-2 {
    margin-top: 1.875rem;
    height: 3.125rem;
}

其他的樣式規(guī)則不變，目前的結(jié)果和之前的是等價的。如果再加一點(diǎn)魔法，通過Media Query改變iPhone 6+的html字號，其他元素的屬性就會自動變化。

@media(min-width: 414px) {
    html {
        font-size: 17.664px;
    }
}

17.664 = 414 * 16 / 375。

由此可以得到html的font-size計算公式為：fontSize = deviceWidth * 16 / 375;

前提是你的html有這條meta屬性：

至于為何是16px，這個后面再介紹。所以rem有個明顯的優(yōu)點(diǎn)，它可以通過少量代碼解決大部分問題。

如果還存在某些細(xì)節(jié)不夠滿意，那再用Media Query微調(diào)。這種主觀的“好看”、“不好看”，可能注定沒法自動化解決吧。

關(guān)于rem兼容性。桌面端的話僅在IE9+支持。vw和vh一樣。所以如果要考慮IE8的兼容性，那沒別的選擇只能用px吧。至于移動端，支持情況不錯，可以在生產(chǎn)環(huán)境使用。

由于（大部分）瀏覽器的默認(rèn)字號為16px，所以一般來說把html的font-size歸一化為16px是比較合適的實(shí)踐方式。同時可以參考這篇文章。

為了大家以后參考方便，我列了一些常用的Media Query斷點(diǎn)（以iPhone 6為基準(zhǔn)）。

@media only screen and (min-width: 320px) {
    html {
        font-size: 13.65px;
    }
}

@media only screen and (min-width: 360px) {
    html {
        font-size: 15.36px;
    }
}

@media only screen and (min-width: 375px) {
    html {
        font-size: 16px;
    }
}

@media only screen and (min-width: 390px) {
    html {
        font-size: 16.64px;
    }
}

@media only screen and (min-width: 414px) {
    html {
        font-size: 17.664px;
    }
}

@media screen and (min-width: 640px) {
    html {
        font-size: 27.31px;
    }
}

大家可能還會看到一些文章中建議把html字號設(shè)成62.5%。

html {
    font-size: 62.5%;
}

因?yàn)閯偺岬綖g覽器默認(rèn)的字號為16px，用百分比換算后等于10px，所以CSS中的rem是相對于10px來計算，這樣計算的時候很方便，而且可以相對于瀏覽器的設(shè)置來改變文字大小。

那為什么要用百分比呢？因?yàn)榭紤]到輔助功能和瀏覽器設(shè)置。對于部分用戶，可能會在手機(jī)或?yàn)g覽器的設(shè)置中增大手機(jī)字號，這意味著對方平時看字是很費(fèi)力的，所以他才要放大。那把html的字號設(shè)置成百分比就很貼心了，會隨著手機(jī)設(shè)置改變頁面的字號。

在手機(jī)上設(shè)置默認(rèn)字號是很常見的現(xiàn)象，所以如果是一個充滿人道主義的排版，我覺得用百分比是非常高尚的。它不僅從視覺角度去考慮美，更加做到了“用戶至上”這四個字。

好，回到現(xiàn)實(shí)環(huán)境。只有國外那些對Accessibility要求比較高的國家，才會真正去落實(shí)這些。但國內(nèi)的話，老實(shí)說，更注重外觀的美。從來沒有哪家互聯(lián)網(wǎng)公司的頁面會去兼容Screen Reader，也很少做Keyboard Shortcut。

扯遠(yuǎn)了，就算你看到用62.5%的情況，有些間距也是不合理的，都做的不太好，特別是把文案做到圖片上的，對字號根本不敏感。如果出發(fā)點(diǎn)不是為了用戶的視覺接受能力，那就別用62.5%；如果想做，就把縮放考慮到位了，別做半吊子。

另外，針對本小節(jié)開頭用16px的情況，這里再給大家提供一招（我調(diào)研了一下目前沒人這么用，也是靈光一現(xiàn)才想到的）。

用Media Query的缺點(diǎn)是什么？它是分段函數(shù)，對于寬度在[320, 360)區(qū)間內(nèi)的屏幕，會適用同一套方案。最完美的應(yīng)該是線性函數(shù)，怎么做？很簡單，用vw即可。

html {
    font-size: 4.266667vw;
}

用1行代碼代替之前6個冗長的Media Query，還不錯吧。

我們來談最后一個話題。

當(dāng)你知道html的font-size怎么設(shè)置后，肯定想問，難道我每次寫代碼時，還得做個除法，把rem的值計算出來嗎？

我相信稍微“現(xiàn)代”一點(diǎn)的開發(fā)者，都會用到CSS預(yù)處理。基于這個工具，事情就很好辦了，以LESS為例，兩步操作如下：

// 1. 按iPhone 6的視覺稿，基準(zhǔn)字號為16px，因此可以設(shè)置一個LESS變量。
@px: 16rem;

// 2. 通過LESS內(nèi)置的除法自動運(yùn)算。比如用到16px的字號時，寫成16/@px即可，最后會計算成1rem。
.example {
    font-size: 16/@px;
    margin: 20/@px 0;
    padding: 20/@px 10/@px;
}

本文給大家介紹了rem的適配方式，如何設(shè)置html的font-size，如何更快地書寫rem的值。

本文沒有任何“PHP是最好的語言”這種類似的導(dǎo)向，都是根據(jù)自己的經(jīng)驗(yàn)和觀察所得出的結(jié)論，若有不對請指正。

頁面適配是很精細(xì)的工作，可能你已經(jīng)有了一套非常熟練的開發(fā)方式，那保持下去即可。如果沒有，不妨參考一下這篇文章。