摘要：是阿里團(tuán)隊(duì)開(kāi)發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問(wèn)題了，為什么阿里還要開(kāi)發(fā)一個(gè)呢在第一種方法中，時(shí)沒(méi)有任何問(wèn)題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾?，存在小于的顯示空間。

話(huà)說(shuō)我剛工作的時(shí)候，就開(kāi)始用rem了，過(guò)了沒(méi)多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一站式的文章，可以系統(tǒng)的了解前端適配的演進(jìn)。閑話(huà)少敘，馬上開(kāi)始。

從UI展現(xiàn)層面上：
我們期望不同尺寸的設(shè)備，頁(yè)面可以自適應(yīng)的展示或者進(jìn)行等比縮放，從而在不同的尺寸的設(shè)備下看起來(lái)協(xié)調(diào)或者差不多。

從代碼實(shí)現(xiàn)層面上：
我們希望前端適配可以用用盡可能簡(jiǎn)潔的代碼來(lái)實(shí)現(xiàn)。最好一套代碼實(shí)現(xiàn)兼容所有設(shè)備，而不是對(duì)每個(gè)或每種設(shè)備都寫(xiě)一套方案，不是次次都選用最無(wú)奈的方案（Android和iOS分開(kāi)編寫(xiě)）。

如果你了解這些關(guān)鍵字，那么這段大可以跳過(guò)，如果后面遇到了問(wèn)題，感覺(jué)有些疑惑，也可以再回來(lái)查閱。

通俗的講，移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來(lái)顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域[1]，但不一定是我們可見(jiàn)的區(qū)域。具體來(lái)說(shuō)，分為以下三種。

Visual Viewport: 可見(jiàn)視口。就是移動(dòng)設(shè)備上可以被我們看見(jiàn)的部分。寬度在移動(dòng)端通過(guò)window.innerWidth獲得（僅限移動(dòng)端，PC上哪怕是chrome模擬也會(huì)有不同的結(jié)果）。

Layout Viewport: 布局視口。

如果把PC上的頁(yè)面放到移動(dòng)端，以iphone8為例，如果只展示為可見(jiàn)視口的寬度（375px），那么頁(yè)面會(huì)被壓縮的特別窄而顯示錯(cuò)亂，所以移動(dòng)瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值，比如980px，這樣的話(huà)即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。[1]

而事實(shí)上，我們一般看不到如上圖這樣出現(xiàn)橫向滾動(dòng)條的界面；在手機(jī)上訪問(wèn)頁(yè)面時(shí)，往往是下圖的樣子：

這是由于頁(yè)面body寬度設(shè)置了100%而沒(méi)有指定一個(gè)具體的寬度導(dǎo)致的，從而使頁(yè)面被等比縮放了。由于用戶(hù)可以縮放，所以還算能正常瀏覽。

Ideal Viewport：理想視口，其實(shí)就是設(shè)備的可見(jiàn)區(qū)域，和可見(jiàn)視口一致。

設(shè)置Ideal Viewport的好處是，只要按照Ideal Viewport來(lái)設(shè)計(jì)樣式稿，用戶(hù)就不用能最完美的查看網(wǎng)站的內(nèi)容——既不用左右滑動(dòng)，也不用放大縮小。

設(shè)置理想視口：

這段代碼的意思是將布局視口的寬度設(shè)置為設(shè)備寬度，初始縮放比例為1，最大縮放比例為1，用戶(hù)不能縮放。

物理像素：一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元，在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。[2]

設(shè)備獨(dú)立像素：又稱(chēng)為CSS像素，就是我們?nèi)粘４a中使用的像素。瀏覽器內(nèi)的一切長(zhǎng)度都是以CSS像素為單位的，CSS像素的單位是px。

設(shè)備像素比(簡(jiǎn)稱(chēng)dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。比如說(shuō)對(duì)于iOS的retina屏，一個(gè)設(shè)備獨(dú)立像素就對(duì)應(yīng)著4個(gè)物理像素。這樣的設(shè)計(jì)可以使畫(huà)面更加清晰銳利，如下圖：

OK，LongLongAgo的前綴之后，終于到了正題。回到我們最開(kāi)始的初心：我們只是想要通過(guò)一套代碼，實(shí)現(xiàn)一個(gè)可以在不同頁(yè)面尺寸上展示差不多的頁(yè)面。在這一塊，現(xiàn)在主要有三種方案。

DPR一致時(shí)，px在不同的屏幕尺寸上會(huì)展示為定寬，這就導(dǎo)致我們的頁(yè)面可能會(huì)出現(xiàn)滾動(dòng)條或者占不滿(mǎn)的情況。而通過(guò)rem來(lái)設(shè)置div的寬高，可以保證頁(yè)面可以通過(guò)調(diào)整html的font-size來(lái)整體放大或者縮小，從而達(dá)到不管屏幕寬度是多少，頁(yè)面都能完美展示的效果。

例如，針對(duì)750*1334的設(shè)計(jì)稿：

這樣，所有的設(shè)備的寬度都是7.5rem，只需要把設(shè)計(jì)稿上的px值統(tǒng)一除以100，就可以得到相應(yīng)的rem值了。

網(wǎng)易也采用的這種方法。

Flexible是阿里團(tuán)隊(duì)開(kāi)發(fā)的前端適配方案，也是用的rem的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問(wèn)題了，為什么阿里還要開(kāi)發(fā)一個(gè)Flexible呢？

在第一種方法中，dpr=1時(shí)沒(méi)有任何問(wèn)題，但是在dpr=2或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾?，存在小?px的顯示空間。如果采用第一種方法，因?yàn)樗y(tǒng)一對(duì)scale設(shè)置為1，那么我們假如想要實(shí)現(xiàn)0.5px, 就只能通過(guò)transform的方式。如果有多個(gè)這樣的樣式，代碼就會(huì)變得很麻煩。

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ffffd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

因此，阿里的flexible方案充分考慮了這種情況，動(dòng)態(tài)的設(shè)置了fontsize和scale, 從而使得CSS中的1px等于物理像素中的1px，在IOS下得到最清晰的體驗(yàn)。

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，對(duì)于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他設(shè)備下，仍舊使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

最終在iphone8下頁(yè)面的header被設(shè)置為：

具體的大家可以看《使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配》

另外需要指出的一點(diǎn)是：Flexible將頁(yè)面分成了100份，頁(yè)面的寬度是10rem，對(duì)于750的設(shè)計(jì)稿，我們需要用相應(yīng)的px數(shù)除以75來(lái)得到。手動(dòng)計(jì)算是愚蠢的，不同的編譯器都可以下載pix2rem插件（可以直接寫(xiě)px然后自動(dòng)轉(zhuǎn)換為相應(yīng)的rem值），直接使用sass或者postcss打包也能達(dá)到同樣的功能。

總結(jié)一下上面兩種rem方法，主要思想為：

根據(jù)dpr的值來(lái)修改html的font-size，從而使用rem實(shí)現(xiàn)等比縮放

根據(jù)dpr的值來(lái)修改viewport實(shí)現(xiàn)1px的線

但是Flexible也有它的局限性，具體表現(xiàn)為：

不能與響應(yīng)式布局兼容

對(duì)Android沒(méi)有做處理，導(dǎo)致1px和backgroudImage還要額外做處理的問(wèn)題[4]

所以我們有了第三種解決方案——vw。

vw是基于Viewport視窗的長(zhǎng)度單位，在CSS3中和Viewport相關(guān)的單位有四個(gè)，分別為vw、vh、vmin和vmax。

vw: 是Viewport"s width的簡(jiǎn)寫(xiě),1vw等于window.innerWidth的1%

vh：和vw類(lèi)似，是Viewport"s height的簡(jiǎn)寫(xiě)，1vh等于window.innerHeihgt的1%

vmin: vmin的值是當(dāng)前vw和vh中較小的值

vmax: vmax的值是當(dāng)前vw和vh中較大的值

其實(shí)vw的方案的寫(xiě)法和flexible方案的寫(xiě)法一致——因?yàn)閒lexible其實(shí)就是用hack的手段模擬了vw的實(shí)現(xiàn)而已。

具體寫(xiě)法：針對(duì)750px的設(shè)計(jì)稿，將相應(yīng)的px值除以7.5就是vw的值。

因?yàn)榇朔椒ú粫?huì)改變可見(jiàn)視口的寬度，所以可以和media query通用了，另外，也支持了Android上高分辨率屏的展示。

盡管在某些Android機(jī)型上還存在兼容問(wèn)題，我們也可以使用Viewport Units Buggyfill，具體見(jiàn)《如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配》

正如大漠所說(shuō)，flexible模擬vw的時(shí)代已經(jīng)過(guò)去，真正的酋長(zhǎng)vw已經(jīng)歸來(lái)。

《移動(dòng)前端開(kāi)發(fā)之viewport的深入理解》

《移動(dòng)端高清、多屏適配方案》

《再聊移動(dòng)端頁(yè)面的適配》

《基于淘寶彈性布局方案lib-flexible的問(wèn)題研究》

《如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配》