使用Flexible實現手淘H5頁面的終端適配

時間 2019-11-19

標籤使用 flexible 實現 h5 頁面終端適配欄目 Flex 简体版

原文原文鏈接

轉發自大漠老師的文章

因爲viewport單位獲得衆多瀏覽器的兼容，lib-flexible這個過渡方案已經能夠放棄使用，無論是如今的版本仍是之前的版本，都存有必定的問題。建議你們開始使用viewport來替代此方案。vw的兼容方案能夠參閱《如何在Vue項目中使用vw實現移動端適配》一文。css

曾幾什麼時候爲了兼容IE低版本瀏覽器而頭痛，覺得到Mobile時代能夠跟這些麻煩說拜拜。可沒想到到了移動時代，爲了處理各終端的適配而亂了手腳。對於混跡各社區的偶，時常發現你們拿手機淘寶的H5頁面作討論——手淘的H5頁面是如何實現多終端的適配？html

那麼趁此Amfe阿里無線前端團隊雙11技術連載之際，用一個實戰案例來告訴你們，手淘的H5頁面是如何實現多終端適配的，但願這篇文章對你們在Mobile的世界中能過得更輕鬆。前端

目標

拿一個雙11的Mobile頁面來作案例，好比你實現一個相似下圖的一個H5頁面：vue

目標很清晰，就是作一個這樣的H5頁面。css3

DEMO

請用手機掃下面的二維碼git

痛點

雖然H5的頁面與PC的Web頁面相比簡單了很多，但讓咱們頭痛的事情是要想盡辦法讓頁面能適配衆多不一樣的終端設備。看看下圖你就會知道，這是多麼痛苦的一件事情：github

點擊這裏查看更多終端設備的參數。web

再來看看手淘H5要適配的終端設備數據：npm

看到這些數據，是否死的心都有了，或者說爲此捏了一把汗出來。瀏覽器

手淘團隊適配協做模式

早期移動端開發，對於終端設備適配問題只屬於Android系列，只不過不少設計師經常忽略Android適配問題，只出一套iOS平臺設計稿。但隨着iPhone6，iPhone6+的出現，今後終端適配問題再也不是Android系列了，也從這個時候讓移動端適配全面進入到「雜屏」時代。

上圖來自於paintcodeapp.com

爲了應對這多麼的終端設備，設計師和前端開發之間又應該採用什麼協做模式？或許你們對此也很是感興趣。

而整個手淘設計師和前端開發的適配協做基本思路是：

選擇一種尺寸做爲設計和開發基準
定義一套適配規則，自動適配剩下的兩種尺寸(其實不只這兩種，你懂的)
特殊適配效果給出設計效果

仍是上一張圖吧，由於一圖賽過千言萬語：

在此也不作更多的闡述。在手淘的設計師和前端開發協做過程當中：手淘設計師常選擇iPhone6做爲基準設計尺寸，交付給前端的設計尺寸是按750px * 1334px爲準(高度會隨着內容多少而改變)。前端開發人員經過一套適配規則自動適配到其餘的尺寸。

根據上面所說的，設計師給咱們的設計圖是一個750px * 1600px的頁面：

前端開發完成終端適配方案

拿到設計師給的設計圖以後，剩下的事情是前端開發人員的事了。而手淘通過多年的摸索和實戰，總結了一套移動端適配的方案——flexible方案。

這種方案具體在實際開發中如何使用，暫時先賣個關子，在繼續詳細的開發實施以前，咱們要先了解一些基本概念。

一些基本概念

在進行具體實戰以前，首先得了解下面這些基本概念(術語)：

視窗 viewport

簡單的理解，viewport是嚴格等於瀏覽器的窗口。在桌面瀏覽器中，viewport就是瀏覽器窗口的寬度高度。但在移動端設備上就有點複雜。

移動端的viewport太窄，爲了能更好爲CSS佈局服務，因此提供了兩個viewport:虛擬的viewportvisualviewport和佈局的viewportlayoutviewport。

George Cummins在Stack Overflow上對這兩個基本概念作了詳細的解釋。

而事實上viewport是一個很複雜的知識點，上面的簡單描述可能沒法幫助你更好的理解viewport，而你又想對此作更深的瞭解，能夠閱讀PPK寫的相關教程。

物理像素(physical pixel)

物理像素又被稱爲設備像素，他是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。正是這些設備像素的微小距離欺騙了咱們肉眼看到的圖像效果。

設備獨立像素(density-independent pixel)

設備獨立像素也稱爲密度無關像素，能夠認爲是計算機座標系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素(好比說CSS像素)，而後由相關係統轉換爲物理像素。

CSS像素

CSS像素是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。通常狀況之下，CSS像素稱爲與設備無關的像素(device-independent pixel)，簡稱DIPs。

屏幕密度

屏幕密度是指一個設備表面上存在的像素數量，它一般以每英寸有多少像素來計算(PPI)。

設備像素比(device pixel ratio)

設備像素比簡稱爲dpr，其定義了物理像素和設備獨立像素的對應關係。它的值能夠按下面的公式計算獲得：

在JavaScript中，能夠經過window.devicePixelRatio獲取到當前設備的dpr。而在CSS中，能夠經過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不一樣dpr的設備，作一些樣式適配(這裏只針對webkit內核的瀏覽器和webview)。

dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip能夠用來輔助區分視網膜設備仍是非視網膜設備。

縮合上述的幾個概念，用一張圖來解釋：

衆所周知，iPhone6的設備寬度和高度爲375pt * 667pt,能夠理解爲設備的獨立像素；而其dpr爲2，根據上面公式，咱們能夠很輕鬆得知其物理像素爲750pt * 1334pt。

以下圖所示，某元素的CSS樣式：

在不一樣的屏幕上，CSS像素所呈現的物理尺寸是一致的，而不一樣的是CSS像素所對應的物理像素具數是不一致的。在普通屏幕下1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的倒是4個物理像素。

有關於更多的介紹能夠點擊這裏詳細瞭解。

看到這裏，你能感受到，在移動端時代屏幕適配除了Layout以外，還要考慮到圖片的適配，由於其直接影響到頁面顯示質量，對於如何實現圖片適配，再此不作過多詳細闡述。這裏盜用了@南宮瑞揚根據mir.aculo.us翻譯的一張信息圖：

meta標籤

標籤有不少種，而這裏要着重說的是viewport的meta標籤，其主要用來告訴瀏覽器如何規範的渲染Web頁面，而你則須要告訴它視窗有多大。在開發移動端頁面，咱們須要設置meta標籤以下：

代碼以顯示網頁的屏幕寬度定義了視窗寬度。網頁的比例和最大比例被設置爲100%。

留個懸念，由於後面的解決方案中須要重度依賴meta標籤。

CSS單位rem

在W3C規範中是這樣描述rem的:

font size of the root element.

簡單的理解，rem就是相對於根元素<html>的font-size來作計算。而咱們的方案中使用rem單位，是能輕易的根據<html>的font-size計算出元素的盒模型大小。而這個特點對咱們來講是特別的有益處。

前端實現方案

瞭解了前面一些相關概念以後，接下來咱們來看實際解決方案。在整個手淘團隊，咱們有一個名叫lib-flexible的庫，而這個庫就是用來解決H5頁面終端適配的。

lib-flexible是什麼？

lib-flexible是一個製做H5適配的開源庫，能夠點擊這裏下載相關文件，獲取須要的JavaScript和CSS文件。

固然你能夠直接使用阿里CDN：

將代碼中的{{version}}換成對應的版本號0.3.4。

使用方法

lib-flexible庫的使用方法很是的簡單，只須要在Web頁面的<head></head>中添加對應的flexible_css.js,flexible.js文件：

第一種方法是將文件下載到你的項目中，而後經過相對路徑添加:

或者直接加載阿里CDN的文件：

另外強烈建議對JS作內聯處理，在全部資源加載以前執行這個JS。執行這個JS後，會在<html>元素上增長一個data-dpr屬性，以及一個font-size樣式。JS會根據不一樣的設備添加不一樣的data-dpr值，好比說2或者3，同時會給html加上對應的font-size的值，好比說75px。

如此一來，頁面中的元素，均可以經過rem單位來設置。他們會根據html元素的font-size值作相應的計算，從而實現屏幕的適配效果。

除此以外，在引入lib-flexible須要執行的JS以前，能夠手動設置meta來控制dpr值，如：

其中initial-dpr會把dpr強制設置爲給定的值。若是手動設置了dpr以後，無論設備是多少的dpr，都會強制認爲其dpr是你設置的值。在此不建議手動強制設置dpr，由於在Flexible中，只對iOS設備進行dpr的判斷，對於Android系列，始終認爲其dpr爲1。

flexible的實質

flexible實際上就是能過JS來動態改寫meta標籤，代碼相似這樣：

事實上他作了這幾樣事情：

動態改寫<meta>標籤
給<html>元素添加data-dpr屬性，而且動態改寫data-dpr的值
給<html>元素添加font-size屬性，而且動態改寫font-size的值

案例實戰

瞭解Flexible相關的知識以後，我們回到文章開頭。咱們的目標是製做一個適配各終端的H5頁面。別的很少說，動手才能豐衣足食。

建立HTML模板

正如前面所介紹的同樣，首先加載了Flexible所需的配置：

這個時候能夠根據設計的圖需求，在HTML文檔的<body></body>中添加對應的HTML結構，好比：

這僅是一個示例文檔，你們能夠根據本身風格寫模板。

爲了能更好的測試頁面，給其配置一點假數據：

接下來的工做就是美化工做了。在寫具體樣式以前，有幾個點須要先了解一下。

把視覺稿中的`px`轉換成`rem`

讀到這裏，你們應該都知道，咱們接下來要作的事情，就是如何把視覺稿中的px轉換成rem。在此花點時間解釋一下。

首先，目前平常工做當中，視覺設計師給到前端開發人員手中的視覺稿尺寸通常是基於640px、750px以及1125px寬度爲準。甚至爲何？你們應該懂的（考慮Retina屏）。

正如文章開頭顯示的示例設計稿，他就是一張以750px爲基礎設計的。那麼問題來了，咱們如何將設計稿中的各元素的px轉換成rem。

我廠的視覺設計師想得仍是很周到的，會幫你把相關的信息在視覺稿上標註出來。

目前Flexible會將視覺稿分紅100份（主要爲了之後能更好的兼容vh和vw），而每一份被稱爲一個單位a。同時1rem單位被認定爲10a。針對咱們這份視覺稿能夠計算出：

那麼咱們這個示例的稿子就分紅了10a，也就是整個寬度爲10rem，<html>對應的font-size爲75px：

這樣一來，對於視覺稿上的元素尺寸換算，只須要原始的px值除以rem基準值便可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉換成爲2.346667rem * 2.346667rem。

如何快速計算

在實際生產當中，若是每一次計算px轉換rem，或許會以爲很是麻煩，或許直接影響你們平時的開發效率。爲了能讓你們更快進行轉換，咱們團隊內的同窗各施所長，爲px轉換rem寫了各式各樣的小工具。

CSSREM

CSSREM是一個CSS的px值轉rem值的Sublime Text3自動完成插件。這個插件是由@正霖編寫。先來看看插件的效果：

有關於CSSREM如何安裝、配置教程能夠點擊這裏查閱。

CSS處理器

除了使用編輯器的插件以外，還可使用CSS的處理器來幫助你們處理。好比說Sass、LESS以及PostCSS這樣的處理器。咱們簡單來看兩個示例。

Sass

使用Sass的同窗，可使用Sass的函數、混合宏這些功能來實現：

除了使用Sass函數外，還可使用Sass的混合宏：

有關於更多的介紹，能夠點擊這裏進行了解。

PostCSS(px2rem)

除了Sass這樣的CSS處理器這外，咱們團隊的@頌奇同窗還開發了一款npm的工具px2rem。安裝好px2rem以後，能夠在項目中直接使用。也可使用PostCSS。使用PostCSS插件postcss-px2rem：

除了在Gulp中配置外，還可使用其餘的配置方式，詳細的介紹能夠點擊這裏進行了解。

配置完成以後，在實際使用時，你只要像下面這樣使用：

px2rem處理以後將會變成：

在整個開發中有了這些工具以後，徹底不用擔憂px值轉rem值影響開發效率。

文本字號不建議使用`rem`

前面你們都見證瞭如何使用rem來完成H5適配。那麼文本又將如何處理適配。是否是也經過rem來作自動適配。

顯然，咱們在iPhone3G和iPhone4的Retina屏下面，但願看到的文本字號是相同的。也就是說，咱們不但願文本在Retina屏幕下變小，另外，咱們但願在大屏手機上看到更多文本，以及，如今絕大多數的字體文件都自帶一些點陣尺寸，一般是16px和24px，因此咱們不但願出現13px和15px這樣的奇葩尺寸。

如此一來，就決定了在製做H5的頁面中，rem並不適合用到段落文本上。因此在Flexible整個適配方案中，考慮文本仍是使用px做爲單位。只不過使用[data-dpr]屬性來區分不一樣dpr下的文本字號大小。

爲了能更好的利於開發，在實際開發中，咱們能夠定製一個font-dpr()這樣的Sass混合宏：

有了這樣的混合宏以後，在開發中能夠直接這樣使用：

固然這只是針對於描述性的文本，好比說段落文本。但有的時候文本的字號也須要分場景的，好比在項目中有一個slogan,業務方但願這個slogan能根據不一樣的終端適配。針對這樣的場景，徹底可使用rem給slogan作計量單位。

CSS

原本想把這個頁面的用到的CSS(或SCSS)貼出來，但考慮篇幅過長，並且這麼簡單的頁面，我想你們也能垂手可得搞定。因此就省略了。權當是給你們留的一個做業吧，感興趣的能夠試試Flexible可否幫你快速完成H5頁面終端適配。

效果

最後來看看真機上顯示的效果吧。我截了兩種設備下的效果：

iPhone4

iPhone6+

總結

其實H5適配的方案有不少種，網上有關於這方面的教程也很是的多。無論哪一種方法，都有其本身的優點和劣勢。而本文主要介紹的是如何使用Flexible這樣的一庫來完成H5頁面的終端適配。爲何推薦使用Flexible庫來作H5頁面的終端設備適配呢？主要由於這個庫在手淘已經使用了近一年，並且已達到了較爲穩定的狀態。除此以外，你不須要考慮如何對元素進行折算，能夠根據對應的視覺稿，直接切入。

固然，若是您有更好的H5頁面終端適配方案，歡迎在下面的評論中與咱們一塊兒分享。若是您在使用這個庫時，碰到任何問題，均可以在Github給咱們提Issue。咱們團隊會努力解決相關需Issues。