摘要：另一種就是不縮放，對等問題多帶帶引入處理方案。彩蛋部分相信大多數(shù)同學也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。

2018年最后的法定假期都已經(jīng)結束了，我相信大部分正在進行或曾經(jīng)進行過移動端頁面開發(fā)的同學都或多或少的了解過使用rem進行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再聊移動端頁面的適配)也面臨過在不同適配方案間進行抉擇的思考，我個人最近對于移動端適配方案也進行了一輪重新的研究，期間，對各種適配方案也有一些自己的見解，正好記錄下來與大家一起分享。

當然不是。并不是所有場景下的移動端頁面都適合采用vw或rem的方案，這類方案的本質是布局等比例的縮放，讓頁面在不同尺寸的屏幕下有類似于矢量圖片縮放的效果，即保證頁面各元素之間位置尺寸的比例關系，并讓元素可以清晰地展現(xiàn)。
這樣的方案更適合于視覺組件種類較多，視覺設計對元素位置的相對關系依賴較強的移動端頁面。其實大部分頁面都可以使用rem或vw的方案進行適配，但對于文本內容較多，或者說希望引導用戶沉浸瀏覽的頁面，我個人并不推薦使用等比縮放的方案，至少并不推薦完全使用等比縮放的方案，對于文本內容還是應該直接使用px這種絕對長度單位，畢竟在大屏手機上用戶希望看到的是更多的內容而不是更大的內容。實際上很多這類的網(wǎng)站也確實是直接使用px結合flex等布局方式進行移動端適配的，這個在后面討論具體技術方案的時候我會舉幾個例子。

在各種rem適配方案的實現(xiàn)中，有兩個核心的點

設置（可以根據(jù)dpr縮放viewport，也可以直接使用1倍的視口大小）

根據(jù)當前布局的寬度（通常是viewport寬度, 也可以是被限制的最大/最小布局寬度）來設置html元素的font-size

之前我已經(jīng)提到過，vw和rem的方案的本質都是“等比例縮放”，因為vw和rem都是相對長度單位(relative length unit)，可以很好的滿足這個需求。區(qū)別是vw是viewport width的1%,而rem是html元素的font-size。當我們讓html元素的font-size與viewport width產(chǎn)生了關聯(lián)后，rem就可以模擬出使用vw進行布局的效果了。所以在rem方案中，我們只是在把rem當做是vw的影子。寫作rem，讀作vw...（劇情似乎狗血起來了... rem: 當然是選擇原諒你們啊）

且慢，當初之所以使用rem的方案流行開來正是因為在那時viewport units的瀏覽器支持程度不甚理想(IOS 8+, Android 4.4+ 參見viewport units的caniuse)。而相比較之下rem就好多了(IOS 4.1+, Android 2.1+ 參見caniuse)，所以對于vw,在當時的大環(huán)境下前端想說愛你不容易。

我想這時候有人要說了：“醒醒兄弟 已經(jīng)8102年了！”
是的，8102年都快要過去了，對于兼容性要求不是特別高的情況下vw也算是可以見天日了，并且也有一些針對vw的補丁方案，但還有一個問題我們要稍微討論一下...

回答依舊是否定的。單純使用vw進行布局不能限制布局的寬度，對于有這個需求的場景至少還是需要將vw和rem混用來處理邊界情況。下文也會更詳細地提到這種方案，這里先按下不表。

當我們在苦苦地尋找適合自己的道路時，不妨先抬頭看看別人是怎么做的。那么現(xiàn)實世界里各家互聯(lián)網(wǎng)公司的移動端頁面都采用了什么樣的適配方案呢？有沒有一些比較有特色的絕活兒呢？以下我按照頁面實際使用的css長度單位作為劃分標準，為大家舉一些栗子。

就像開篇提到的，并不是說移動端就一定要使用相對長度單位，傳統(tǒng)的響應式布局依然是很好的選擇，尤其在新聞，社區(qū)等可閱讀內容較多的場景直接使用px單位可以營造更好地體驗。px方案可以讓大屏幕手機展示出更多的內容，更符合人們的閱讀習慣。采用這種方案的網(wǎng)站有：

騰訊

移動端首頁主要是新聞內容，需要更好的閱讀體驗，適合直接使用px進行布局。

知乎

知乎也是比較典型的追求閱讀體驗的場景，不出意外的也是直接使用px。

點評

視覺元素較豐富，依舊采用了px方案，頁面基本是flex布局，適配效果很好

頭條

頭條的這個方案有點特色,依然會設置html元素的font-size也會加上data-dpr屬性并且會對viewport進行scale, 但是最終css的輸出還是px,并沒有使用rem，并且會對不同dpr下的樣式多帶帶定義，如下圖所示：

這樣可以解決1px border的問題，文字大小也不會隨屏幕尺寸變動（畢竟文本內容較多），雖然我暫時沒找到使用到rem的地方，但確實可以在需要的時候對特殊元素做rem方案的布局，不過這種方案應該會造成css文件大小倍增，而且輸出這樣的css肯定也少不了構建流程插件的支持，算是一種特定的解決方案吧。

看到這里你以為最終輸出px就不能做類似于rem/vw的彈性布局了嗎，下面就給大家看一手絕活兒...

淘寶

什么？給我們看了半天文章結果用的是px？
其實聰明的你一定很快就會發(fā)現(xiàn)在效果上淘寶移動端的適配方案和rem/vw的方案其實是差不多的，元素的樣式都是通過js生成的，雖然單位確實是px，但是方案依舊是以375px寬度的尺寸為基準進行縮放的。原理上應該是一種css in js的方案，只不過把rem方案中設置html元素font-size的過程內化到使用js計算元素style的過程中去了。這樣的方案涉及到整體的開發(fā)框架上的統(tǒng)一與支持，并不算是一個特別通用的方案。好處可能是直接使用px單位結果更為精確。可以說是一手絕活兒了。當然淘寶旗下還是有非常多的產(chǎn)品線的，也未必是同樣的適配方案(比如大漠老師文中的例子)，這里只針對這個移動端首頁來說。

rem方案可以說是比較成熟了，出鏡率也較高，也就不再贅述了，總的來說rem方案主要分為兩種，一種是縮放viewport的方案，如當年的lib-flexible,可以對1px border等細節(jié)問題較方便的處理，但會影響到media query。另一種就是不縮放viewport，對1px boder等問題多帶帶引入處理方案。然后對于基準尺寸下的html元素fong-size也有很多不同的定義方式，這個說起來沒什么標準可言，我就隨便舉幾個例子說明吧：

（以下說明的rem與px的對應關系都是在屏幕寬度為375px的情況下）

馬蜂窩
1rem = 37.5px

小米
1rem = 52.0833px

小紅書
1rem = 50px

微博

1rem = 16px
稍微說明下 微博的font-size是根據(jù)media query來生成的

（以下說明的rem與px的對應關系都是在屏幕寬度為375px, viewport scale 0.5的情況下）

點評
1rem = 100px

B站主站
1rem = 46.875px

搜狐
1rem = 75px

來了，終于來了！前面說了這么多關于vw的問題，到底有沒有現(xiàn)有的產(chǎn)品在大規(guī)模的使用vw的方案呢？兼容方案又是怎么做的呢？

京東

京東的移動端首頁采用了vw+rem的布局方式，元素布局上依然使用rem單位，沒有縮放viewport, html元素的font-size則使用vw + px fallback的形式，并且使用media query來限制布局寬度，如下圖所示

正常情況下：

邊界情況下

網(wǎng)易

網(wǎng)易的方案和京東基本相同，沒有縮放viewport，使用media query，只處理html元素的font-size，并限制布局寬度。

餓了么

餓了么也是采用的vw+rem的方案，不過對viewport進行了縮放，也沒有限制布局寬度，html元素的font-size依然由px指定，但是具體元素的布局上使用vw + px fallbak的形式，如下圖所示：

可以看到，使用上述兩種vw+rem的方案對現(xiàn)有的rem方案的改動都不會很大，都采用了vw + fallback的方式，兼容性問題得到了保證，只是餓了么的方案可能更需要構建過程中的插件支持（關于這個，后面我給你們解釋解釋什么叫驚喜）。這樣來看，對于大漠老師提出的vw方案中使用viewport-units-buggyfill庫進行兼容的做法，我個人就并不是很推薦了，因為該庫使用了css content屬性進行兼容處理，官方文檔中就指出了對部分瀏覽器的img標簽有影響 ，需要全局引入一條css規(guī)則。且對于需要正常使用content的情況（如：圖標字體）也會引起不可避免的沖突，另外也不支持偽元素的兼容。所以從我個人的角度來說，如果你一定要問我使用怎樣的vw適配方案，我會推薦給你上述兩種vw + rem的方案。

當然不是，我只是列舉了幾個比較典型的移動端適配方案，其實在具體實現(xiàn)的細節(jié)上可以自行把握的點還是很多的，適合的終歸才是最好的，那顆銀彈或許不會出現(xiàn)，但我們的手中也從未缺少過利器。

相信大多數(shù)同學也是有想法在實際開發(fā)中把vw融入到現(xiàn)有的移動端適配方案中的。如我上述提到的兩種vw+rem方案，只修改html元素font-size的方案對于已經(jīng)在使用rem方案的同學來說改動的成本并不大，只需要在原本的media query 里(或js生成style時)在font-size: *px后面加上font-size: *vw就可以了，如需限制布局寬度則需多加一點判斷。

而對于餓了么那種在使用到長度單位時同時輸出rem+vw的方式，肯定是要通過一點額外的插件來做了。如果你和我一樣剛好在使用Stylus作為css預處理器，那我專門寫了一個Stylus的插件用來幫你處理這個問題。
這個插件可以讓你在開發(fā)流程使用px書寫css, 和現(xiàn)有的部分插件不同的是，它同時支持多種適配方案的輸出，目前支持rem,純vw方案以及剛才提到的vw+rem方案的輸出。并且對不希望轉換px的場景做了很方便的處理。也就是說，如果你現(xiàn)在使用rem方案，可以直接替換使用該插件，當你需要切換到vw或vw+rem方案時基本可以做到無縫切換。

具體的使用方式和示例請參見pandaGao/stylus-px-to-relative-unit