再聊移動端頁面的適配

Flexible承載的使命

Lexible到今天也有幾年的歷史了，解救了不少同窗針對於H5頁面佈局的適配問題。而這套方案也相對而言是一個較爲成熟的方案。簡單的回憶一下，當初爲了能讓頁面更好的適配各類不一樣的終端，經過Hack手段來根據設備的 dpr 值相應改變 標籤中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">

從而讓頁面達麼縮放的效果，也變相的實現頁面的適配功能。而其主要的思想有三點：

• 根據dpr的值來修改viewport實現1px的線
• 根據dpr的值來修改html的font-size，從而使用rem實現等比縮放
• 使用Hack手段用rem模擬vw特性

有關於Flexible方案實現適配，感興趣的同窗能夠移步閱讀《使用Flexible實現手淘H5頁面的終端適配》一文。雖然Flexible解決了適配終端不少問題，但它並非萬能的，也不是最優秀的，他仍是存在一些問題的，好比iframe的引用，有時候就把咱們本身給埋進去了。針對其中的一些不足之處，有些同窗對其進行過相關的改造，在網上搜索能找到相關的方案。

那麼時代在變化，前端技術在不斷的變化，試問：Flexible仍是最佳方案？Flexible還有存在的必要嗎？ 最近一直在探討這方面，這裏先告訴你們Flexible已經完成了他自身的歷史使命，咱們能夠放下Flexible，擁抱新的變化。接下來的內容，我將分享一下我最近本身探討的新的適配方案，或許不少團隊同窗已經開始使用了，若是有不對之處，但願能獲得大嬸們的指正；若是您有更好的方案，但願能一塊兒分享一塊兒探討。

先上菜，再嘮嗑

先上個二維碼：

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

iPhone系列效果

部分Android效果

注：若是掃上面的二維碼沒有任何效果，你能夠點擊這裏，打開在線頁面，從新生成你的設備能識別的二維碼號 。

上面的Demo，測試了Top30的機型。目前未獲得支持的：

Top30機型中不在列表中的，將看到的效果如上圖所示。至於敢不敢用，這就得看親了。必竟第一個吃螃蟹的人是須要必定的勇氣！

適配方案

前面給你們介紹了這個方案目前獲得的支持狀況以及效果。也扯了很多廢話，接下來進入正題吧。

在移動端佈局，咱們須要面對兩個最爲重要的問題：

• 各終端下的適配問題
• Retina屏的細節處理

不一樣的終端，咱們面對的屏幕分辨率、DPR、1px、2x圖等一系列的問題。那麼這個佈局方案也是針對性的解決這些問題，只不過解決這些問題再也不是使用Hack手段來處理，而是直接使用原生的CSS技術來處理的。

適配終端

首要解決的是適配終端。回想一下，之前的 Flexible 方案是經過 JavaScript 來模擬 vw 的特性，那麼到今天爲止，vw 已經獲得了衆多瀏覽器的支持，也就是說，能夠直接考慮將 vw 單位運用於咱們的適配佈局中。

衆所周知，vw 是基於 Viewport 視窗的長度單位，這裏的視窗（Viewport）指的就是瀏覽器可視化的區域，而這個可視區域是 window.innerWidth/window.innerHeight的大小。 用下圖簡單的來示意一下：

由於Viewport涉及到的知識點不少，要介紹清楚這方面的知識，都須要幾篇文章來進行闡述。@PPK大神有兩篇文章詳細介紹了這方面的知識。中文能夠移步這裏進行閱讀。

在CSS Values and Units Module Level 3中和Viewport相關的單位有四個，分別爲vw、vh、vmin和vmax。

• vw：是Viewport's width的簡寫,1vw等於window.innerWidth的1%
• vh：和vw相似，是Viewport's height的簡寫，1vh等於window.innerHeihgt的1%
• vmin：vmin的值是當前vw和vh中較小的值
• vmax：vmax的值是當前vw和vh中較大的值

vmin 和 vmax 是根據 Viewport 中長度偏大的那個維度值計算出來的，若是 window.innerHeight > window.innerWidth 則 vmin 取百分之一的 window.innerWidth ，vmax取百分之一的window.innerHeight 計算。

仍是用一張圖來示意吧，一圖勝於千言萬語：

因此在這個方案中大膽的使用vw來替代之前 Flexible 中的 rem 縮放方案。先來回歸到咱們的實際業務中來。目前出視覺設計稿，咱們都是使用 750px 寬度的，從上面的原理來看，那麼 100vw = 750px，即 1vw = 7.5px。那麼咱們能夠根據設計圖上的 px 值直接轉換成對應的 vw 值。看到這裏，不少同窗開始感到崩潰，又要計算，能不能簡便一點，能不能再簡單一點，實際上是能夠的，咱們可使用 PostCSS 的插件postcss-px-to-viewport，讓咱們能夠直接在代碼中寫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; 
}

在實際使用的時候，你能夠對該插件進行相關的參數配置：

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

假設你的設計稿不是750px而是1125px，那麼你就能夠修改vewportWidth的值。有關於該插件的詳細介紹，能夠閱讀其官方使用文檔。

上面解決了px到vw的轉換計算。那麼在哪些地方可使用vw來適配咱們的頁面。根據相關的測試：

• 容器適配，可使用vw
• 文本的適配，可使用vw
• 大於1px的邊框、圓角、陰影均可以使用vw
• 內距和外距，可使用vw

另外有一個細節須要特別的提出，好比咱們有一個這樣的設計：

若是咱們直接使用：

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

最終的效果會形成 [w-187-246] 容器的高度小於 [w-188-246] 容器的高度。這個時候咱們就須要考慮到容器的長寬比縮放。這方面的方案不少，但我仍是推薦工具化來處理，這裏推薦@一絲 姐姐寫的一個PostCSS插件postcss-aspect-ratio-mini。這個插件使用很簡單，不須要作任何的配置，你只須要本地安裝一下就OK。使用的時候以下：

[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';
}

編譯出來：

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

這樣就能夠完美的實現長寬比的效果。有關於這方面的原理在這裏不作過多闡述，感興趣的話能夠閱讀早前整理的文章:

• CSS實現長寬比的幾種方案
• 容器長寬比
• Web中如何實現縱橫比
• 實現精準的流體排版原理

目前採用PostCSS插件只是一個過渡階段，在未來咱們能夠直接在CSS中使用aspect-ratio屬性來實現長寬比。

解決1px方案

前面提到過，對於1px是不建議將其轉換成對應的vw單位的，但在Retina下，咱們始終是須要面對如何解決1px的問題。在《再談Retina下1px的解決方案》文章中提供了多種解決1px的方案。在這裏的話，我的推薦另一種解決1px的方案。依舊是使用PostCSS插件，解決1px可使用postcss-write-svg。

使用postcss-write-svg你能夠經過border-image或者background-image兩種方式來處理。好比：

@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會自動幫你把CSS編譯出來：

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

使用PostCSS的插件是否是比咱們修改圖片要來得簡單與方便。

上面演示的是使用 border-image 方式，除此以外還可使用 background-image 來實現。好比：

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

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

編譯出來就是：

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

這個方案簡單易用，是我所須要的。目前測試下來，基本能達到我所須要的需求。但有一點千萬別忘了，記得在中添加：

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

上面闡述的是這個適配方案中所用到的技術點，簡單的總結一下：

• 使用vw來實現頁面的適配，而且經過PostCSS的插件postcss-px-to-viewport把px轉換成vw。這樣的好處是，咱們在擼碼的時候，不須要進行任何的計算，你只須要根據設計圖寫px單位
• 爲了更好的實現長寬比，特別是針對於img、vedio和iframe元素，經過PostCSS插件postcss-aspect-ratio-mini來實現，在實際使用中，只須要把對應的寬和高寫進去便可
• 爲了解決1px的問題，使用PostCSS插件postcss-write-svg,自動生成border-image或者background-image的圖片

Viewport不足之處

採用vw來作適配處理並非只有好處沒有任何缺點。有一些細節之處仍是存在必定的缺陷的。好比當容器使用vw單位，margin採用px單位時，很容易形成總體寬度超過100vw，從而影響佈局效果。對於相似這樣的現象，咱們能夠採用相關的技術進行規避。

好比將 margin 換成 padding，而且配合box-sizing。只不過這不是最佳方案，隨着未來瀏覽器或者應用自身的Webview對calc()函數的支持以後，碰到vw和px混合使用的時候，能夠結合calc()函數一塊兒使用，這樣就能夠完美的解決。

另一點，px轉換成vw單位，多少還會存在必定的像素差，畢竟不少時候沒法徹底整除。

到目前爲止，我發現的兩個不足之處。或許在後面的使用當中，還會碰到一些其餘不爲人之的坑。事實也是如此，無論任何方案，踩得坑越多，該方案也愈來愈強大。但願喜歡這個適配方案的同窗和我一塊兒踩坑，讓其更爲完善。

如何判斷本身的應用是否支持

雖然該文的示例，進行了多方面的測試。但不少同窗仍是會擔心本身的APP應用是否支持該方案，而不敢大膽嘗試或者使用。其實沒必要要這麼擔憂，你能夠拿本身的設備，或者應用掃描下面的二維碼：

當頁面跑完測試以後，找到對應的Values and Units列表項：

若是vw欄是綠色表明你的設備或應用支持該方案；反之則不支持。另外你也能夠常常關注css3test相關的更新，後面將會根據相關的規範更新測試代碼，讓你能快速掌握哪些屬性能夠大膽使用。

總結

H5頁面的適配方案老是使人蛋疼的，事實上頁面的佈局老是使人蛋疼的。但技術是不斷革新的，咱們能夠隨着保持對新技術的關注，嘗試這些新特性運用到實際項目中，只有這樣，咱們解決問題的方案纔會愈來愈完善。

到寫這篇文章爲止，雖然還有那麼一兩款機型不支持vw，但並不影響咱們去使用。只有不斷去嘗試，纔會有進步。在此，但願你們大膽嘗試，一塊兒讓該方案變得更完美。若是你有更好的建議，或者你踩到任何坑，歡迎在下面的評論中與我分享，或者發郵件給我一塊兒討論。

原文

更多內容請查看 個人博客新地址https://www.cssge.com/