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

tingx 2018-01-22

展開(kāi)全文

前端圈真亂，這話(huà)一點(diǎn)不假。但亂也亂的好處，亂則生變，有變化才有進(jìn)步。今天還是老調(diào)重談，聊聊移動(dòng)端頁(yè)面的適配。因?yàn)閷?duì)于一枚前端而言，天天和頁(yè)面打交道（H5頁(yè)面），那么布局的活總是少不了，這也將面臨不同終端的適配問(wèn)題。不知道你是否和我一樣，頁(yè)面布局總是或多或少會(huì)有一些蛋疼的事情發(fā)生。如果是的話(huà)，建議你花點(diǎn)時(shí)間閱讀完下面我扯蛋的東東。

Flexible承載的使命

Flexible到今天也有幾年的歷史了，解救了很多同學(xué)針對(duì)于H5頁(yè)面布局的適配問(wèn)題。而這套方案也相對(duì)而言是一個(gè)較為成熟的方案。簡(jiǎn)單的回憶一下，當(dāng)初為了能讓頁(yè)面更好的適配各種不同的終端，通過(guò)Hack手段來(lái)根據(jù)設(shè)備的dpr值相應(yīng)改變<meta>標(biāo)簽中viewport的值：

<!-- dpr = 1-->
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no"> 
<!-- dpr = 2-->
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
<!-- dpr = 3-->
<meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">

從而讓頁(yè)面達(dá)么縮放的效果，也變相的實(shí)現(xiàn)頁(yè)面的適配功能。而其主要的思想有三點(diǎn)：

根據(jù)dpr的值來(lái)修改viewport實(shí)現(xiàn)1px的線(xiàn)
根據(jù)dpr的值來(lái)修改html的font-size，從而使用rem實(shí)現(xiàn)等比縮放
使用Hack手段用rem模擬vw特性

有關(guān)于Flexible方案實(shí)現(xiàn)適配，在2015年雙十一之后做過(guò)這方面的技術(shù)文檔分享，感興趣的同學(xué)可以移步閱讀《使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配》一文。雖然Flexible解決了適配終端很多問(wèn)題，但它并不是萬(wàn)能的，也不是最優(yōu)秀的，他還是存在一些問(wèn)題的，比如iframe的引用，有時(shí)候就把我們自己給埋進(jìn)去了。針對(duì)其中的一些不足之處，有些同學(xué)對(duì)其進(jìn)行過(guò)相關(guān)的改造，在網(wǎng)上搜索能找到相關(guān)的方案。

那么時(shí)代在變化，前端技術(shù)在不斷的變化，試問(wèn)：Flexible還是最佳方案？Flexible還有存在的必要嗎？ 最近一直在探討這方面，這里先告訴大家Flexible已經(jīng)完成了他自身的歷史使命，我們可以放下Flexible，擁抱新的變化。接下來(lái)的內(nèi)容，我將分享一下我最近自己探討的新的適配方案，或許很多團(tuán)隊(duì)同學(xué)已經(jīng)開(kāi)始使用了，如果有不對(duì)之處，希望能得到大嬸們的指正；如果您有更好的方案，希望能一起分享一起探討。

先上菜，再?lài)Z嗑

先上個(gè)二維碼：

你可以使用手淘App、優(yōu)酷APP、各終端自帶的瀏覽器、UC瀏覽器、QQ瀏覽器、Safari瀏覽器和Chrome瀏覽器掃描上面的二維碼，您看到相應(yīng)的效果：

iPhone系列效果

部分Android效果

注：如果掃上面的二維碼沒(méi)有任何效果，你可以點(diǎn)擊這里，打開(kāi)在線(xiàn)頁(yè)面，重新生成你的設(shè)備能識(shí)別的二維碼號(hào) 。

上面的Demo，測(cè)試了Top30的機(jī)型。目前未得到支持的：

品牌	型號(hào)	系統(tǒng)版本	分辨率	屏幕尺寸	手淘APP	優(yōu)酷APP	原生瀏覽器	QQ瀏覽器	UC瀏覽器	Chrome瀏覽器
華為	Mate9	Android7.0	1080 x 1920	5英寸	Yes	Yes	No	Yes	Yes	Yes
華為	Mate7	Android4.2	1080 x 1920	5.2英寸	Yes	Yes	No	Yes	Yes	Yes
魅族	Mx4 (M460 移動(dòng)4G)	Android4.4.2	1152 x 1920	5.36英寸	Yes	No	No	Yes	Yes	Yes
Oppo	R7007	Android4.3	1280 x 720	5英寸	Yes	No	No	Yes	Yes	No
三星	N9008 (Galaxy Note3)	Android4.4.2	1080 x 1920	5.7英寸	Yes	No	Yes	Yes	Yes	Yes
華碩	ZenFone5(x86)	Android4.3	720 x 280	5英寸	No	No	No	Yes	No	No

Top30機(jī)型中不在列表中的，將看到的效果如上圖所示。至于敢不敢用，這就得看親了。必竟第一個(gè)吃螃蟹的人是需要一定的勇氣！(^_^)

適配方案

前面給大家介紹了這個(gè)方案目前得到的支持情況以及效果。也扯了不少?gòu)U話(huà)，接下來(lái)進(jìn)入正題吧。

在移動(dòng)端布局，我們需要面對(duì)兩個(gè)最為重要的問(wèn)題：

各終端下的適配問(wèn)題
Retina屏的細(xì)節(jié)處理

不同的終端，我們面對(duì)的屏幕分辨率、DPR、1px、2x圖等一系列的問(wèn)題。那么這個(gè)布局方案也是針對(duì)性的解決這些問(wèn)題，只不過(guò)解決這些問(wèn)題不再是使用Hack手段來(lái)處理，而是直接使用原生的CSS技術(shù)來(lái)處理的。

適配終端

首要解決的是適配終端?；叵胍幌?，以前的Flexible方案是通過(guò)JavaScript來(lái)模擬vw的特性，那么到今天為止，vw已經(jīng)得到了眾多瀏覽器的支持，也就是說(shuō)，可以直接考慮將vw單位運(yùn)用于我們的適配布局中。

眾所周知，vw是基于Viewport視窗的長(zhǎng)度單位，這里的視窗（Viewport）指的就是瀏覽器可視化的區(qū)域，而這個(gè)可視區(qū)域是window.innerWidth/window.innerHeight的大小。用下圖簡(jiǎn)單的來(lái)示意一下：

因?yàn)閂iewport涉及到的知識(shí)點(diǎn)很多，要介紹清楚這方面的知識(shí)，都需要幾篇文章來(lái)進(jìn)行闡述。@PPK大神有兩篇文章詳細(xì)介紹了這方面的知識(shí)。中文可以移步這里進(jìn)行閱讀。

在CSS Values and Units Module Level 3中和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中較大的值

vmin和vmax是根據(jù)Viewport中長(zhǎng)度偏大的那個(gè)維度值計(jì)算出來(lái)的，如果window.innerHeight > window.innerWidth則vmin取百分之一的window.innerWidth，vmax取百分之一的window.innerHeight計(jì)算。

還是用一張圖來(lái)示意吧，一圖勝于千言萬(wàn)語(yǔ)：

所以在這個(gè)方案中大膽的使用vw來(lái)替代以前Flexible中的rem縮放方案。先來(lái)回歸到我們的實(shí)際業(yè)務(wù)中來(lái)。目前出視覺(jué)設(shè)計(jì)稿，我們都是使用750px寬度的，從上面的原理來(lái)看，那么100vw = 750px，即1vw = 7.5px。那么我們可以根據(jù)設(shè)計(jì)圖上的px值直接轉(zhuǎn)換成對(duì)應(yīng)的vw值?？吹竭@里，很多同學(xué)開(kāi)始感到崩潰，又要計(jì)算，能不能簡(jiǎn)便一點(diǎn)，能不能再簡(jiǎn)單一點(diǎn)，其實(shí)是可以的，我們可以使用PostCSS的插件postcss-px-to-viewport，讓我們可以直接在代碼中寫(xiě)px，比如：

[w-369]{
    width: 369px;
}

[w-369] h2 span {
    background: #FF5000;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    font-size: 20px;
    text-shadow: 0 2px 2px #FF5000;
    padding: 2px 5px;
    margin-right: 5px;
}

PostCSS編譯之后就是我們所需要的帶vw代碼：

[w-369] {
    width: 49.2vw;
}
[w-369] h2 span {
    background: #ff5000;
    color: #fff;
    display: inline-block;
    border-radius: .53333vw;
    text-shadow: 0 0.26667vw 0.26667vw #ff5000;
    padding: .26667vw .66667vw;
}
[w-369] h2 span,
[w-369] i {
    font-size: 2.66667vw;
    margin-right: .66667vw;
}

在實(shí)際使用的時(shí)候，你可以對(duì)該插件進(jìn)行相關(guān)的參數(shù)配置：

"postcss-px-to-viewport": {
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 5,
    viewportUnit: 'vw',
    selectorBlackList: [],
    minPixelValue: 1,
    mediaQuery: false
}

假設(shè)你的設(shè)計(jì)稿不是750px而是1125px，那么你就可以修改vewportWidth的值。有關(guān)于該插件的詳細(xì)介紹，可以閱讀其官方使用文檔。

上面解決了px到vw的轉(zhuǎn)換計(jì)算。那么在哪些地方可以使用vw來(lái)適配我們的頁(yè)面。根據(jù)相關(guān)的測(cè)試：

容器適配，可以使用vw
文本的適配，可以使用vw
大于1px的邊框、圓角、陰影都可以使用vw
內(nèi)距和外距，可以使用vw

另外有一個(gè)細(xì)節(jié)需要特別的提出，比如我們有一個(gè)這樣的設(shè)計(jì)：

如果我們直接使用：

[w-188-246] {
    width: 188px;
}
[w-187-246]{
    width: 187px
}

最終的效果會(huì)造成[w-187-246]容器的高度小于[w-188-246]容器的高度。這個(gè)時(shí)候我們就需要考慮到容器的長(zhǎng)寬比縮放。這方面的方案很多，但我還是推薦工具化來(lái)處理，這里推薦@一絲姐姐寫(xiě)的一個(gè)PostCSS插件postcss-aspect-ratio-mini。這個(gè)插件使用很簡(jiǎn)單，不需要做任何的配置，你只需要本地安裝一下就OK。使用的時(shí)候如下：

[aspectratio] {
    position: relative;
}
[aspectratio]::before {
    content: '';
    display: block;
    width: 1px;
    margin-left: -1px;
    height: 0;
}

[aspectratio-content] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
[aspectratio][aspect-ratio="188/246"]{
    aspect-ratio: '188:246';
}

編譯出來(lái)：

[aspectratio][aspect-ratio="188/246"]:before {
    padding-top: 130.85106382978725%;
}

這樣就可以完美的實(shí)現(xiàn)長(zhǎng)寬比的效果。有關(guān)于這方面的原理在這里不做過(guò)多闡述，感興趣的話(huà)可以閱讀早前整理的文章:

目前采用PostCSS插件只是一個(gè)過(guò)渡階段，在將來(lái)我們可以直接在CSS中使用aspect-ratio屬性來(lái)實(shí)現(xiàn)長(zhǎng)寬比。

解決`1px`方案

前面提到過(guò)，對(duì)于1px是不建議將其轉(zhuǎn)換成對(duì)應(yīng)的vw單位的，但在Retina下，我們始終是需要面對(duì)如何解決1px的問(wèn)題。在《再談Retina下1px的解決方案》文章中提供了多種解決1px的方案。在這里的話(huà)，個(gè)人推薦另外一種解決1px的方案。依舊是使用PostCSS插件，解決1px可以使用postcss-write-svg。

使用postcss-write-svg你可以通過(guò)border-image或者background-image兩種方式來(lái)處理。比如：

@svg 1px-border {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

這樣PostCSS會(huì)自動(dòng)幫你把CSS編譯出來(lái)：

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www./2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}

使用PostCSS的插件是不是比我們修改圖片要來(lái)得簡(jiǎn)單與方便。

上面演示的是使用border-image方式，除此之外還可以使用background-image來(lái)實(shí)現(xiàn)。比如：

@svg square {
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 100%;
    }
}

#example {
    background: white svg(square param(--color #00b1ff));
}

編譯出來(lái)就是：

#example {
    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www./2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

這個(gè)方案簡(jiǎn)單易用，是我所需要的。目前測(cè)試下來(lái)，基本能達(dá)到我所需要的需求。但有一點(diǎn)千萬(wàn)別忘了，記得在<head>中添加：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

上面闡述的是這個(gè)適配方案中所用到的技術(shù)點(diǎn)，簡(jiǎn)單的總結(jié)一下：

使用vw來(lái)實(shí)現(xiàn)頁(yè)面的適配，并且通過(guò)PostCSS的插件postcss-px-to-viewport把px轉(zhuǎn)換成vw。這樣的好處是，我們?cè)跀]碼的時(shí)候，不需要進(jìn)行任何的計(jì)算，你只需要根據(jù)設(shè)計(jì)圖寫(xiě)px單位
為了更好的實(shí)現(xiàn)長(zhǎng)寬比，特別是針對(duì)于img、vedio和iframe元素，通過(guò)PostCSS插件postcss-aspect-ratio-mini來(lái)實(shí)現(xiàn)，在實(shí)際使用中，只需要把對(duì)應(yīng)的寬和高寫(xiě)進(jìn)去即可
為了解決1px的問(wèn)題，使用PostCSS插件postcss-write-svg,自動(dòng)生成border-image或者background-image的圖片

這里使用了多個(gè)PostCSS的插件，其實(shí)現(xiàn)在有很多優(yōu)秀的PostCSS插件能幫助我們解決很多問(wèn)題。哪果你從未接觸過(guò)有關(guān)于PostCSS相關(guān)的知識(shí)，建議你可以花點(diǎn)時(shí)間去學(xué)習(xí)一下，在W3cplus提供了一些有關(guān)于PostCSS相關(guān)的文章。如果你想系統(tǒng)的學(xué)習(xí)PostCSS相關(guān)的知識(shí)，推薦你購(gòu)買(mǎi)《深入PostCSS Web設(shè)計(jì)》一書(shū)：

降級(jí)處理

最開(kāi)始提到過(guò)，到目前為止，T30的機(jī)型中還有幾款機(jī)型是不支持vw的適配方案。那么如果業(yè)務(wù)需要，應(yīng)該怎么處理呢？有兩種方式可以進(jìn)行降級(jí)處理：

CSS Houdini：通過(guò)CSS Houdini針對(duì)vw做處理，調(diào)用CSS Typed OM Level1 提供的CSSUnitValue API。
CSS Polyfill：通過(guò)相應(yīng)的Polyfill做相應(yīng)的處理，目前針對(duì)于vw單位的Polyfill主要有：vminpoly、Viewport Units Buggyfill、vunits.js和Modernizr。個(gè)人推薦采用Viewport Units Buggyfill

Viewport不足之處

采用vw來(lái)做適配處理并不是只有好處沒(méi)有任何缺點(diǎn)。有一些細(xì)節(jié)之處還是存在一定的缺陷的。比如當(dāng)容器使用vw單位，margin采用px單位時(shí)，很容易造成整體寬度超過(guò)100vw，從而影響布局效果。對(duì)于類(lèi)似這樣的現(xiàn)象，我們可以采用相關(guān)的技術(shù)進(jìn)行規(guī)避。比如將margin換成padding，并且配合box-sizing。只不過(guò)這不是最佳方案，隨著將來(lái)瀏覽器或者應(yīng)用自身的Webview對(duì)calc()函數(shù)的支持之后，碰到vw和px混合使用的時(shí)候，可以結(jié)合calc()函數(shù)一起使用，這樣就可以完美的解決。

另外一點(diǎn)，px轉(zhuǎn)換成vw單位，多少還會(huì)存在一定的像素差，畢竟很多時(shí)候無(wú)法完全整除。

到目前為止，我發(fā)現(xiàn)的兩個(gè)不足之處?；蛟S在后面的使用當(dāng)中，還會(huì)碰到一些其他不為人之的坑。事實(shí)也是如此，不管任何方案，踩得坑越多，該方案也越來(lái)越強(qiáng)大。希望喜歡這個(gè)適配方案的同學(xué)和我一起踩坑，讓其更為完善。

如何判斷自己的應(yīng)用是否支持

雖然該文的示例，進(jìn)行了多方面的測(cè)試。但很多同學(xué)還是會(huì)擔(dān)憂(yōu)自己的APP應(yīng)用是否支持該方案，而不敢大膽嘗試或者使用。其實(shí)不必要這么擔(dān)心，你可以拿自己的設(shè)備，或者應(yīng)用掃描下面的二維碼：

當(dāng)頁(yè)面跑完測(cè)試之后，找到對(duì)應(yīng)的Values and Units列表項(xiàng)：

如果vw欄是綠色代表你的設(shè)備或應(yīng)用支持該方案；反之則不支持。另外你也可以經(jīng)常關(guān)注css3test相關(guān)的更新，后面將會(huì)根據(jù)相關(guān)的規(guī)范更新測(cè)試代碼，讓你能快速掌握哪些屬性可以大膽使用。

總結(jié)

H5頁(yè)面的適配方案總是令人蛋疼的，事實(shí)上頁(yè)面的布局總是令人蛋疼的。但技術(shù)是不斷革新的，我們可以隨著保持對(duì)新技術(shù)的關(guān)注，嘗試這些新特性運(yùn)用到實(shí)際項(xiàng)目中，只有這樣，我們解決問(wèn)題的方案才會(huì)越來(lái)越完善。

到寫(xiě)這篇文章為止，雖然還有那么一兩款機(jī)型不支持vw，但并不影響我們?nèi)ナ褂谩Ｖ挥胁粩嗳L試，才會(huì)有進(jìn)步。在此，希望大家大膽嘗試，一起讓該方案變得更完美。如果你有更好的建議，或者你踩到任何坑，歡迎在下面的評(píng)論中與我分享，或者發(fā)郵件給我一起討論。

大漠

常用昵稱(chēng)“大漠”，W3CPlus創(chuàng)始人，目前就職于手淘。對(duì)HTML5、CSS3和Sass等前端腳本語(yǔ)言有非常深入的認(rèn)識(shí)和豐富的實(shí)踐經(jīng)驗(yàn)，尤其專(zhuān)注對(duì)CSS3的研究，是國(guó)內(nèi)最早研究和使用CSS3技術(shù)的一批人。CSS3、Sass和Drupal中國(guó)布道者。2014年出版《圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn)》。

如需轉(zhuǎn)載，煩請(qǐng)注明出處：https://www./css/vw-for-layout.html

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀(guān)點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： tingx > 《移動(dòng)端》

舉報(bào)/認(rèn)領(lǐng)