新手的成長(zhǎng)記錄點(diǎn)滴（十）_html/css_WEB-ITnose

1、關(guān)于適配

曾幾何時(shí)為了兼容IE低版本瀏覽器而頭痛，以為到Mobile時(shí)代可以跟這些麻煩說(shuō)拜拜。可沒(méi)想到到了移動(dòng)時(shí)代，為了處理各終端的適配而亂了手腳。今天就拿手淘的H5頁(yè)面是如何實(shí)現(xiàn)多終端的適配？

目標(biāo)：

拿一個(gè)雙11的Mobile頁(yè)面來(lái)做案例，比如你實(shí)現(xiàn)一個(gè)類似下圖的一個(gè)H5頁(yè)面：

目標(biāo)很清晰，就是做一個(gè)這樣的H5頁(yè)面。

痛點(diǎn)：

雖然H5的頁(yè)面與PC的Web頁(yè)面相比簡(jiǎn)單了不少，但讓我們頭痛的事情是要想盡辦法讓頁(yè)面能適配眾多不同的終端設(shè)備?？纯聪聢D你就會(huì)知道，這是多么痛苦的一件事情：

再來(lái)看看手淘H5要適配的終端設(shè)備數(shù)據(jù)：

手淘團(tuán)隊(duì)適配協(xié)作模式：

早期移動(dòng)端開(kāi)發(fā)，對(duì)于終端設(shè)備適配問(wèn)題只屬于Android系列，只不過(guò)很多設(shè)計(jì)師常常忽略Android適配問(wèn)題，只出一套iOS平臺(tái)設(shè)計(jì)稿。但隨著iPhone6，iPhone6+的出現(xiàn)，從此終端適配問(wèn)題不再是Android系列了，也從這個(gè)時(shí)候讓移動(dòng)端適配全面進(jìn)入到“雜屏”時(shí)代。

為了應(yīng)對(duì)這多么的終端設(shè)備，設(shè)計(jì)師和前端開(kāi)發(fā)之間又應(yīng)該采用什么協(xié)作模式？或許大家對(duì)此也非常感興趣。

而整個(gè)手淘設(shè)計(jì)師和前端開(kāi)發(fā)的適配協(xié)作基本思路是：

選擇一種尺寸作為設(shè)計(jì)和開(kāi)發(fā)基準(zhǔn)

定義一套適配規(guī)則，自動(dòng)適配剩下的兩種尺寸(其實(shí)不僅這兩種，你懂的)

特殊適配效果給出設(shè)計(jì)效果

還是上一張圖吧，因?yàn)橐粓D勝過(guò)千言萬(wàn)語(yǔ)：

在手淘的設(shè)計(jì)師和前端開(kāi)發(fā)協(xié)作過(guò)程中：手淘設(shè)計(jì)師常選擇iPhone6作為基準(zhǔn)設(shè)計(jì)尺寸，交付給前端的設(shè)計(jì)尺寸是按750px * 1334px為準(zhǔn)(高度會(huì)隨著內(nèi)容多少而改變)。前端開(kāi)發(fā)人員通過(guò)一套適配規(guī)則自動(dòng)適配到其他的尺寸。

根據(jù)上面所說(shuō)的，設(shè)計(jì)師給我們的設(shè)計(jì)圖是一個(gè)750px * 1600px的頁(yè)面：

前端開(kāi)發(fā)完成終端適配方案

拿到設(shè)計(jì)師給的設(shè)計(jì)圖之后，剩下的事情是前端開(kāi)發(fā)人員的事了。而手淘經(jīng)過(guò)多年的摸索和實(shí)戰(zhàn)，總結(jié)了一套移動(dòng)端適配的方案——flexible方案。

這種方案具體在實(shí)際開(kāi)發(fā)中如何使用，暫時(shí)先賣個(gè)關(guān)子，在繼續(xù)詳細(xì)的開(kāi)發(fā)實(shí)施之前，我們要先了解一些基本概念。

一些基本概念：

在進(jìn)行具體實(shí)戰(zhàn)之前，首先得了解下面這些基本概念(術(shù)語(yǔ))：

視窗 viewport

簡(jiǎn)單的理解，viewport是嚴(yán)格等于瀏覽器的窗口。在桌面瀏覽器中，viewport就是瀏覽器窗口的寬度高度。但在移動(dòng)端設(shè)備上就有點(diǎn)復(fù)雜。

移動(dòng)端的viewport太窄，為了能更好為CSS布局服務(wù)，所以提供了兩個(gè)viewport:虛擬的viewportvisualviewport和布局的viewportlayoutviewport。

物理像素(physical pixel)：

物理像素又被稱為設(shè)備像素，他是顯示設(shè)備中一個(gè)最微小的物理部件。每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。正是這些設(shè)備像素的微小距離欺騙了我們?nèi)庋劭吹降膱D像效果。

設(shè)備獨(dú)立像素(density-independent pixel)：

設(shè)備獨(dú)立像素也稱為密度無(wú)關(guān)像素，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如說(shuō)CSS像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

CSS像素

CSS像素是一個(gè)抽像的單位，主要使用在瀏覽器上，用來(lái)精確度量Web頁(yè)面上的內(nèi)容。一般情況之下，CSS像素稱為與設(shè)備無(wú)關(guān)的像素(device-independent pixel)，簡(jiǎn)稱DIPs。

屏幕密度

屏幕密度是指一個(gè)設(shè)備表面上存在的像素?cái)?shù)量，它通常以每英寸有多少像素來(lái)計(jì)算(PPI)。

設(shè)備像素比(device pixel ratio)

設(shè)備像素比簡(jiǎn)稱為dpr，其定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按下面的公式計(jì)算得到：

設(shè)備像素比 ＝ 物理像素 / 設(shè)備獨(dú)立像素

在JavaScript中，可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。而在CSS中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對(duì)不同dpr的設(shè)備，做一些樣式適配(這里只針對(duì)webkit內(nèi)核的瀏覽器和webview)。

dip或dp,（device independent pixels，設(shè)備獨(dú)立像素）與屏幕密度有關(guān)。dip可以用來(lái)輔助區(qū)分視網(wǎng)膜設(shè)備還是非視網(wǎng)膜設(shè)備。

眾所周知，iPhone6的設(shè)備寬度和高度為375pt * 667pt,可以理解為設(shè)備的獨(dú)立像素；而其dpr為2，根據(jù)上面公式，我們可以很輕松得知其物理像素為750pt * 1334pt。

某元素的CSS樣式：

width: 2px;height: 2px；

在不同的屏幕上，CSS像素所呈現(xiàn)的物理尺寸是一致的，而不同的是CSS像素所對(duì)應(yīng)的物理像素具數(shù)是不一致的。在普通屏幕下1個(gè)CSS像素對(duì)應(yīng)1個(gè)物理像素，而在Retina屏幕下，1個(gè)CSS像素對(duì)應(yīng)的卻是4個(gè)物理像素。

有關(guān)于更多的介紹可以點(diǎn)擊這里詳細(xì)了解。

看到這里，你能感覺(jué)到，在移動(dòng)端時(shí)代屏幕適配除了Layout之外，還要考慮到圖片的適配，因?yàn)槠渲苯佑绊懙巾?yè)面顯示質(zhì)量，對(duì)于如何實(shí)現(xiàn)圖片適配，再此不做過(guò)多詳細(xì)闡述。這里盜用了@南宮瑞揚(yáng)根據(jù)mir.aculo.us翻譯的一張信息圖：

meta標(biāo)簽

標(biāo)簽有很多種，而這里要著重說(shuō)的是viewport的meta標(biāo)簽，其主要用來(lái)告訴瀏覽器如何規(guī)范的渲染W(wǎng)eb頁(yè)面，而你則需要告訴它視窗有多大。在開(kāi)發(fā)移動(dòng)端頁(yè)面，我們需要設(shè)置meta標(biāo)簽如下：

代碼以顯示網(wǎng)頁(yè)的屏幕寬度定義了視窗寬度。網(wǎng)頁(yè)的比例和最大比例被設(shè)置為100%。留個(gè)懸念，因?yàn)楹竺娴慕鉀Q方案中需要重度依賴meta標(biāo)簽。

CSS單位rem

在W3C規(guī)范中是這樣描述rem的:

font size of the root element.

簡(jiǎn)單的理解，rem就是相對(duì)于根元素的font-size來(lái)做計(jì)算。而我們的方案中使用rem單位，是能輕易的根據(jù)的font-size計(jì)算出元素的盒模型大小。而這個(gè)特色對(duì)我們來(lái)說(shuō)是特別的有益處。

前端實(shí)現(xiàn)方案

了解了前面一些相關(guān)概念之后，接下來(lái)我們來(lái)看實(shí)際解決方案。在整個(gè)手淘團(tuán)隊(duì)，我們有一個(gè)名叫l(wèi)ib-flexible的庫(kù)，而這個(gè)庫(kù)就是用來(lái)解決H5頁(yè)面終端適配的。

lib-flexible是一個(gè)制作H5適配的開(kāi)源庫(kù)，可以點(diǎn)擊這里下載相關(guān)文件，獲取需要的JavaScript和CSS文件。

當(dāng)然你可以直接使用阿里CDN：

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com