背景

開(kāi)發(fā)移動(dòng)H5頁(yè)面

面對(duì)不同分辨率的手機(jī)，

面對(duì)不同屏幕尺寸的手機(jī)

視覺(jué)手稿

在前端開(kāi)發(fā)之前，Visual MM會(huì)給我們一個(gè)psd文件，叫做Visual Draft。

對(duì)于移動(dòng)開(kāi)發(fā)來(lái)說(shuō)，為了達(dá)到頁(yè)面的高清效果，視覺(jué)稿的規(guī)范往往遵循以下兩點(diǎn):

首先選擇一部手機(jī)的屏幕寬度和高度作為基準(zhǔn)(以前iphone4是320×480，現(xiàn)在iphone6更多是375×667)。

對(duì)于視網(wǎng)膜屏(比如dpr=2)，為了達(dá)到高清效果，視覺(jué)稿的畫(huà)布大小會(huì)是基準(zhǔn)的兩倍，也就是說(shuō)像素?cái)?shù)量會(huì)是原來(lái)的四倍(對(duì)于iphone6，原來(lái)的375×667會(huì)變成750×1334)。

問(wèn)題:

對(duì)于dpr=2的手機(jī)，為什么畫(huà)布大小×2可以解決高清問(wèn)題？

對(duì)于大小為2倍的視覺(jué)稿，如何還原具體css編碼中每個(gè)塊的真實(shí)寬度和高度(即排版問(wèn)題)？

帶著疑問(wèn)往下看...

一些概念

在做具體分析之前，首先要了解以下幾個(gè)關(guān)鍵的基本概念(術(shù)語(yǔ))。

物理像素(物理像素)

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

與器件密度無(wú)關(guān)的像素

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

因此，物理像素和設(shè)備無(wú)關(guān)像素之間存在一定的對(duì)應(yīng)關(guān)系，這就是下一個(gè)設(shè)備像素比。

設(shè)備像素比(設(shè)備像素比)

設(shè)備像素比(dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，其值可以根據(jù)以下公式得到:

1設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上，x方向或者y方向

在java中，可以通過(guò)window.devicePixelRatio獲取當(dāng)前設(shè)備的dpr

在css中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio查詢媒體，并針對(duì)不同的dpr設(shè)備做一些樣式適配(這里只針對(duì)webkit內(nèi)核瀏覽器和webview)。

結(jié)合以上概念，一起舉個(gè)例子:

以iphone6為例:

器件的寬高為375×667，可以理解為器件的獨(dú)立像素(或css像素)。

Dpr是2，根據(jù)上面的計(jì)算公式，它的物理像素應(yīng)該是×2，也就是750×1334。

用一張圖來(lái)表達(dá)，就這樣(原諒我偷圖):

從上圖可以看出，對(duì)于這樣的css樣式:

1width: 2px;2height: 2px;

在不同的屏幕上(普通屏幕vs視網(wǎng)膜屏幕)，css像素的大小(物理大小)是一致的，不同的是一個(gè)css像素對(duì)應(yīng)的物理像素個(gè)數(shù)不一致。

在正常屏幕下，一個(gè)css像素對(duì)應(yīng)一個(gè)物理像素(1:1)。在視網(wǎng)膜屏幕下，一個(gè)css像素對(duì)應(yīng)四個(gè)物理像素(1:4)。

位圖像素

位圖像素是光柵圖像(如png、jpg、gif等)的最小數(shù)據(jù)單位。).每個(gè)位圖像素包含一些自己的顯示信息(如顯示位置、顏色值、透明度等)。).

說(shuō)到這里，就不得不說(shuō)視網(wǎng)膜下的圖片顯示了。

理論上，只有一個(gè)位圖像素對(duì)應(yīng)一個(gè)物理像素，才能完美清晰地顯示畫(huà)面。

正常屏幕下沒(méi)有問(wèn)題，但視網(wǎng)膜屏幕下會(huì)出現(xiàn)位圖像素不足，導(dǎo)致畫(huà)面模糊。

用一張圖片來(lái)表示:

如上圖:對(duì)于dpr=2的視網(wǎng)膜屏，一個(gè)位圖像素對(duì)應(yīng)四個(gè)物理像素。由于單個(gè)位圖像素?zé)o法進(jìn)一步分割，只能就近取色，導(dǎo)致畫(huà)面模糊(注意上面的顏色值)。

所以對(duì)于畫(huà)面高清問(wèn)題，更好的解決方法是畫(huà)面翻倍(@2x)。

如：200×300(css pixel)img標(biāo)簽，就需要提供400×600的圖片。比如:200×300(css像素)的img標(biāo)簽，你需要提供400×600的圖片。

這樣，位圖的像素?cái)?shù)是原來(lái)的四倍。在視網(wǎng)膜屏下，位圖像素?cái)?shù)可以和物理像素?cái)?shù)形成1: 1的比例，畫(huà)面自然清晰(這也解釋了之前留下的一個(gè)問(wèn)題，為什么視覺(jué)稿的畫(huà)布尺寸要×2？)。

還有一個(gè)問(wèn)題。如果在正常屏幕上使用兩倍的圖片會(huì)發(fā)生什么？

很明顯，在普通屏幕下，200×300(css pixel)img標(biāo)簽，所對(duì)應(yīng)的物理像素個(gè)數(shù)就是200×300個(gè)，而兩倍圖片的位圖像素個(gè)數(shù)則是200×300*4，所以就出現(xiàn)一個(gè)物理像素點(diǎn)對(duì)應(yīng)4個(gè)位圖像素點(diǎn)，所以它的取色也只能通過(guò)一定的算法(顯示結(jié)果就是一張只有原圖像素總數(shù)四分之一，我們稱這個(gè)過(guò)程叫做downsampling)，肉眼看上去雖然圖片不會(huì)模糊，但是會(huì)覺(jué)得圖片缺少一些銳利度，或者是有點(diǎn)色差(但還是可以接受的)。很明顯，在普通屏幕下，200×300(css pixel)img標(biāo)簽對(duì)應(yīng)的物理像素個(gè)數(shù)是200×300，而雙畫(huà)面的位圖像素個(gè)數(shù)是200×300*4，所以有一個(gè)物理像素對(duì)應(yīng)四個(gè)位圖像素，所以只能通過(guò)一定的算法才能得到它的顏色(顯示結(jié)果只有原畫(huà)面像素總數(shù)的四分之一，我們稱這個(gè)過(guò)程為下采樣。雖然用肉眼看畫(huà)面不會(huì)模糊，但會(huì)覺(jué)得畫(huà)面缺少一些銳度或者有點(diǎn)色差(但還是可以接受的)。

用一張圖片來(lái)表示:

針對(duì)以上兩個(gè)問(wèn)題，我做了一個(gè)演示(內(nèi)網(wǎng)訪問(wèn))戳在這里。

demo中，100×100的圖片，分別放在100×100，50×50，25×25的img容器中，在retina屏幕下的顯示效果。演示時(shí)，100×100張圖片分別放在100×100、50×50和25×25的img容器中，視網(wǎng)膜屏下顯示效果。

條形圖，通過(guò)放大鏡，您實(shí)際上可以看到邊界像素值的差異:

圖1，顏色是在附近拍攝的，顏色值在紅色和白色之間，使得畫(huà)面看起來(lái)比較模糊(可以理解為拉伸畫(huà)面)。

圖2，附近沒(méi)有顏色，顏色值不是紅就是白，畫(huà)面看起來(lái)很清晰。

圖三，顏色是在附近拍的。顏色值在紅色和白色之間，太重了。畫(huà)面看起來(lái)色差，缺乏銳度(可以理解為圖像擠壓)。

愛(ài)一張圖片，看“愛(ài)”字就能看出圖片是模糊還是清晰。

幾個(gè)問(wèn)題

在這里，我們將談?wù)劜煌直媛?、不同屏幕的移?dòng)終端H5在開(kāi)發(fā)過(guò)程中遇到的一些經(jīng)典問(wèn)題。

視網(wǎng)膜下，畫(huà)面高清問(wèn)題

這個(gè)問(wèn)題的解決方案上面已經(jīng)介紹過(guò)了:把圖片加倍(@2x)，然后把圖片容器縮小50%。

如:圖片尺寸，400×600；

1.img標(biāo)簽1.img標(biāo)簽

1width: 200px;2height: 300px;

2.背景圖片

1width: 200px;2height: 300px;3background-image: url(image@2x.jpg);4background-size: 200px 300px; // 或者: background-size: contain;

這樣的缺點(diǎn)，很明顯，在普通的屏幕下:

還下載了@2x圖片，造成資源浪費(fèi)。

由于下采樣，圖像將失去一些清晰度(或色差)。

所以最好的解決辦法就是在不同的dpr下加載不同大小的圖片。

可以用css媒體查詢，也可以用java條件判斷。

那么問(wèn)題來(lái)了。這種情況下，需要準(zhǔn)備兩套圖片。(@1x和@2x)

我覺(jué)得，做的好的公司都會(huì)有這樣的圖片服務(wù)器，可以通過(guò)url獲取參數(shù)，然后控制圖片的質(zhì)量，還可以把圖片剪成不同的大小。

所以我們只需要上傳大圖(@2x)，其他小圖交給圖像服務(wù)器處理。我們只需要負(fù)責(zé)拼接URL。

比如這樣一張?jiān)瓐D:

1https://img.alicdn.com/tps/TB1AGMmIp**afXp****XX.jpg // 原圖

您可以像這樣裁剪圖片:

1// 200×2002https://img.alicdn.com/tps/TB1AGMmIp**afXp****XX.jpg_200x200.jpg34// 100×1005https://img.alicdn.com/tps/TB1AGMmIp**afXp****XX.jpg_100x100.jpg

(ps:當(dāng)然，剪切只是對(duì)原圖的等剪切，所以要保證畫(huà)面的清晰~)

視網(wǎng)膜下，邊框:1px問(wèn)題

這可能是設(shè)計(jì)師最敏感和最關(guān)心的問(wèn)題。

首先我要說(shuō)，為什么網(wǎng)膜下會(huì)存在邊界:1px這個(gè)短語(yǔ)？

我們正常寫(xiě)css，比如這個(gè)邊框:1px，視網(wǎng)膜屏下，會(huì)不會(huì)有什么問(wèn)題？

首先，我們來(lái)看一下下圖:

上面兩張圖分別是iphone3gs(dpr=1)和iphone5(dpr=2)下的測(cè)試結(jié)果。相比之下，它們是一致的，在1px邊框的顯示上沒(méi)有區(qū)別。

那么視網(wǎng)膜顯示有什么優(yōu)勢(shì)，為什么設(shè)計(jì)師覺(jué)得高清屏幕下這條線比較粗(對(duì))？明明和左右一樣~

或者用一個(gè)圖來(lái)解釋(原諒我又偷了圖):

上圖中，對(duì)于一條寬度為1px的直線，它們?cè)谄聊簧系奈锢沓叽?灰度區(qū)域)確實(shí)是一樣的，但區(qū)別其實(shí)是屏幕上最小的物理顯示單位，也就是物理像素。所以對(duì)于一條直線來(lái)說(shuō)，iphone5能顯示的最小寬度實(shí)際上是從圖中紅色線圈開(kāi)始的灰色區(qū)域，用css表示，理論上是0.5px。

所以設(shè)計(jì)師要視網(wǎng)膜下邊框:1px事實(shí)上，它有1個(gè)物理像素寬。對(duì)于css，可以認(rèn)為是邊框:0.5px，它是視網(wǎng)膜下可以顯示的最小單位(dpr=2)。

但是無(wú)奈的是，并不是所有的手機(jī)瀏覽器都能識(shí)別邊框:0.5px在ios7、安卓等其他系統(tǒng)中，0.5px會(huì)被當(dāng)作0px，那么如何實(shí)現(xiàn)這個(gè)0.5px呢？

最簡(jiǎn)單的方法是這樣的(元素比例):

01.scale{02position: relative;03}04.scale:after{05content:"";06position: absolute;07bottom:0px;08left:0px;09right:0px;10border-bottom:1px solid #ddd;11-webkit-transform:scaleY(.5);12-webkit-transform-origin:0 0;13}

我們照常寫(xiě)border-bottom:1px solid # DDD；，然后用transform: scaleY(.5)縮小0.5倍達(dá)到0.5px的效果，但是這個(gè)hack不夠通用(比如圓角等)。)，而且寫(xiě)起來(lái)比較麻煩。

當(dāng)然，還有很多其他的黑客方法，可以在網(wǎng)上搜索，但各有利弊。這里推薦的方案是頁(yè)面比例，比較籠統(tǒng)，幾乎可以滿足所有場(chǎng)景。

對(duì)于iphone5(dpr=2)，添加以下元標(biāo)簽并設(shè)置視口(比例0.5):

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

這樣，頁(yè)面中所有的border: 1px都會(huì)減少0.5，從而達(dá)到border:0.5px；的效果。

有人擔(dān)心頁(yè)面縮放后會(huì)影響性能。@苗晶做了一個(gè)性能測(cè)試。見(jiàn)此處(內(nèi)網(wǎng)地址)。

看一下實(shí)現(xiàn)的效果圖的對(duì)比(右側(cè)優(yōu)化):

然而，頁(yè)面規(guī)模不可避免地會(huì)帶來(lái)一些問(wèn)題:

字體大小將被縮放

頁(yè)面布局將被縮放(例如，div的寬度和高度)

這兩個(gè)問(wèn)題后面會(huì)提到…

多屏自適應(yīng)布局問(wèn)題

對(duì)于手機(jī)布局，為了適應(yīng)各種大屏幕手機(jī)，目前最好的解決方案是使用相對(duì)單元rem。

基于rem的原理，我們需要做的是針對(duì)不同的手機(jī)屏幕尺寸和dpr動(dòng)態(tài)改變根節(jié)點(diǎn)html的字體大小(參考值)。

這里我們提取一個(gè)公式(rem代表參考值)

1rem = document.documentElement.clientWidth * dpr / 10

描述:

乘以dpr，因?yàn)轫?yè)面可能縮放)1/dpr次，以實(shí)現(xiàn)1px邊框頁(yè)面(如果不是，dpr=1)。

除以10是為了四舍五入和方便計(jì)算(理論上可以是任意值)

所以像下面這樣，html的字體大小可能是:

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px * 2 / 10 = 64px

iphone6: 375px * 2 / 10 = 75px

為了動(dòng)態(tài)改變根節(jié)點(diǎn)html的字體大小，我們可以通過(guò)css或java來(lái)實(shí)現(xiàn)。

在css模式下，html的字體大小可以通過(guò)設(shè)備寬度的媒體查詢來(lái)改變:

01html{font-size: 32px;}02//iphone 603@media (min-device-width : 375px) {04html{font-size: 64px;}05}06// iphone6 plus07@media (min-device-width : 414px) {08html{font-size: 75px;}09}10*/

缺點(diǎn):通過(guò)設(shè)備寬度范圍間隔等媒體查詢動(dòng)態(tài)改變r(jià)em參考值不夠準(zhǔn)確。比如寬度為360px、寬度為320px的手機(jī)，因?yàn)槠聊粚挾仍谕粎^(qū)間(

在java模式下，通過(guò)上面的公式計(jì)算參考值rem，然后編寫(xiě)如下的樣式(代碼參考自kimi的m-base模塊)

01vardpr, rem, scale;02vardocEl = document.documentElement;03varfontEl = document.('style');04varmetaEl = document.querySelector('meta[name="viewport"]');0506dpr = window.devicePixelRatio || 1;07rem = docEl.clientWidth * dpr / 10;08scale = 1 / dpr;091011// 設(shè)置viewport，進(jìn)行縮放，達(dá)到高清效果12metaEl.setAttribute('content', 'width='+ dpr * docEl.clientWidth + ',initial-scale='+ scale + ',maximum-scale='+ scale + ', minimum-scale='+ scale + ',user-scalable=no');1314// 設(shè)置data-dpr屬性，留作的css hack之用15docEl.setAttribute('data-dpr', dpr);1617// 動(dòng)態(tài)寫(xiě)入樣式18docEl.firstElementChild.(fontEl);19fontEl.innerHTML = 'html{font-size:'+ rem + 'px!important;}';2021// 給js調(diào)用的，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)22window.rem2px = function(v) {23v = parseFloat(v);24returnv * rem;25};26window.px2rem = function(v) {27v = parseFloat(v);28returnv / rem;29};3031window.dpr = dpr;32window.rem = rem;

這樣就可以準(zhǔn)確計(jì)算出不同屏幕應(yīng)該有的rem基準(zhǔn)值。缺點(diǎn)是加載這樣的js代碼，但個(gè)人認(rèn)為這是目前最好的解決方案。

因?yàn)檫@個(gè)方案同時(shí)解決了三個(gè)問(wèn)題:

邊框:1px問(wèn)題

畫(huà)面高清問(wèn)題

屏幕適配布局問(wèn)題

說(shuō)到版式，自然要回答原問(wèn)題:如何在css編碼中還原視覺(jué)稿的真實(shí)寬度和高度？

先決條件:

我為iphone6拿到了一張750×1334的高清視覺(jué)稿

采用以上HD方案(js代碼)。

如果有塊，psd文件中測(cè)到寬高為750×300px的div，如何轉(zhuǎn)換成rem單位？

公式如下:

1rem = px / 基準(zhǔn)值;

對(duì)于iphone6的一個(gè)視覺(jué)草稿，它的基準(zhǔn)值是75(前面提到過(guò))；

因此，在確定了視覺(jué)草稿(即確定了基準(zhǔn)值)之后，我們通常會(huì)編寫(xiě)一個(gè)具有較少的mixin，如下所示:

1// 例如: .px2rem(height, 80);2.px2rem(@name, @px){3@{name}: @px / 75 * 1rem;4}

因此，對(duì)于寬高為750×300px的div，我們用較少的篇幅這樣寫(xiě):

1.px2rem(width, 750);2.px2rem(height, 300);

轉(zhuǎn)換成html，就這樣:

1width: 10rem; // -> 750px2height: 4rem; // -> 300px

最后，因?yàn)閐pr是2，頁(yè)面比例是0.5，所以手機(jī)屏幕上顯示的真實(shí)寬度和高度應(yīng)該是375×150px，剛剛好。

如果頁(yè)面的比例不是0.5，我們的代碼如下所示:

1.px2rem(width, 375);2.px2rem(height, 150);

這個(gè)寬度和高度，我們通常是這樣得到的:

把750×1334的視覺(jué)稿轉(zhuǎn)換成375×667的尺寸后，測(cè)量一下這個(gè)塊的大小(感覺(jué)很傻)。

750×1334的塊寬高為750×300px后，除以2(感覺(jué)麻煩)。

最后，給出了無(wú)布局調(diào)整(上圖)和有快速眼動(dòng)布局調(diào)整(下圖)的對(duì)比圖:

(以上手機(jī)有:iphone3gs、iphone5、iphone6)

顯而易見(jiàn)，rem適配的每個(gè)塊的寬度和高度都會(huì)隨著手機(jī)屏幕寬度的變化而變化。最明顯的是看圖片列表的部分。最后一張圖片的視覺(jué)稿只需要一點(diǎn)外觀，rem布局在任何屏幕下都顯示的很好。

字體大小問(wèn)題

既然上面的方案會(huì)縮放頁(yè)面，那么頁(yè)面塊的寬度和高度可以依靠高清的可視稿，因?yàn)榭梢暩灞緛?lái)就是×2，所以可以直接測(cè)量，那么字體怎么辦呢？

對(duì)于字體縮放問(wèn)題，設(shè)計(jì)師最初的要求是:任何手機(jī)屏幕上的字體大小都要統(tǒng)一，所以我們會(huì)針對(duì)不同的分辨率(不同的dpr)做以下工作:

1font-size: 16px;2[data-dpr="2"] input {3font-size: 32px;4}

(注意rem不能用于字體，誤差太大，任何屏幕下的字體大小都不可能相同。)

為了方便起見(jiàn)，我們還將編寫(xiě)一個(gè)包含較少:

01.px2px(@name, @px){02@{name}: round(@px / 2) * 1px;03[data-dpr="2"] & {04@{name}: @px * 1px;05}06// for mx307[data-dpr="2.5"] & {08@{name}: round(@px * 2.5 / 2) * 1px;09}10// for 小米note11[data-dpr="2.75"] & {12@{name}: round(@px * 2.75 / 2) * 1px;13}14[data-dpr="3"] & {15@{name}: round(@px / 2 * 3) * 1px16}17// for 三星note418[data-dpr="4"] & {19@{name}: @px * 2px;20}21}

(注意:html的data-dpr屬性之前在js方案中有提到，所以這里有用。)

根據(jù)經(jīng)驗(yàn)和測(cè)試，還是會(huì)有這些奇怪的dpr，這里統(tǒng)一兼容~

當(dāng)你使用它時(shí)，它是這樣的:

1.px2px(font-size, 32);

當(dāng)然，對(duì)于其他css屬性，如果要求它們?cè)诓煌膁pr下保持一致，也可以這樣做，比如:

1.px2px(padding, 20);2.px2px(right, 8);

最后

在上面，我們總結(jié)了H5高清和多屏適配在移動(dòng)終端上的一些解決方案，并講解了相關(guān)知識(shí)。還請(qǐng)指出錯(cuò)誤的地方