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

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

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

在各種rem適配方案的實現中，有兩個核心的點

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

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

之前我已經提到過，vw和rem的方案的本質都是“等比例縮放”，因為vw和rem都是相對長度單位(relative length unit)，可以很好的滿足這個需求。區別是vw是viewport width的1%,而rem是html元素的font-size。當我們讓html元素的font-size與viewport width產生了關聯后，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,在當時的大環境下前端想說愛你不容易。

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

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

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

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

騰訊

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

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

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

馬蜂窩
1rem = 37.5px

小米
1rem = 52.0833px

小紅書
1rem = 50px

微博

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

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

點評
1rem = 100px

B站主站
1rem = 46.875px

搜狐
1rem = 75px

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

京東

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

正常情況下：

邊界情況下

網易

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

餓了么

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

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

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

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

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

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