51CTO 網(wǎng)+ 第十二期沙龍：大話數(shù)據(jù)之美_如何用數(shù)據(jù)驅動用戶體驗

視覺稿

在前端開發(fā)之前，視覺MM會給我們一個psd文件,，稱之為視覺稿,。

對于移動端開發(fā)而言,，為了做到頁面高清的效果,，視覺稿的規(guī)范往往會遵循以下兩點：

1）首先,，選取一款手機的屏幕寬高作為基準(以前是iPhone4的320×480,，現(xiàn)在更多的是iphone6的375×667)。

2）對于retina屏幕(如: dpr=2),，為了達到高清效果,，視覺稿的畫布大小會是基準的2倍，也就是說像素點個數(shù)是原來的4倍（對iphone6而言：原先的375×667,，就會變成750×1334）,。

問題：

對于dpr=2的手機，為什么畫布大小×2,，就可以解決高清問題,？

對于2倍大小的視覺稿，在具體的css編碼中如何還原每一個區(qū)塊的真實寬高(也就是布局問題)?

帶著問題,，往下看…

一些概念

在進行具體的分析之前,，首先得知道下面這些關鍵性基本概念(術語)。

物理像素(physical pixel)

一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元,，在操作系統(tǒng)的調度下,，每一個設備像素都有自己的顏色值和亮度值。

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

設備獨立像素(也叫密度無關像素),，可以認為是計算機坐標系統(tǒng)中得一個點,，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然后由相關系統(tǒng)轉換為物理像素,。

所以說,，物理像素和設備獨立像素之間存在著一定的對應關系，這就是接下來要說的設備像素比,。

設備像素比(device pixel ratio)

設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關系,，它的值可以按如下的公式的得到：

設備像素比 = 物理像素 / 設備獨立像素 // 在某一方向上，x方向或者y方向

在javascript中,，可以通過window.devicePixelRatio獲取到當前設備的dpr,。

在css中，可以通過-webkit-device-pixel-ratio,，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的設備,，做一些樣式適配(這里只針對webkit內核的瀏覽器和webview),。

綜合上面幾個概念，一起舉例說明下——以iphone6為例：

設備寬高為375×667,，可以理解為設備獨立像素(或css像素),。

dpr為2,，根據(jù)上面的計算公式，其物理像素就應該×2,，為750×1334,。

用一張圖來表現(xiàn)，就是這樣(原諒我的盜圖)：

上圖中可以看出,，對于這樣的css樣式：

width: 2px; 
height: 2px; 

在不同的屏幕上(普通屏幕 vs retina屏幕),，css像素所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1個css像素所對應的物理像素個數(shù)是不一致的,。

在普通屏幕下,，1個css像素 對應 1個物理像素(1:1)。 在retina 屏幕下,，1個css像素對應 4個物理像素(1:4),。

位圖像素

一個位圖像素是柵格圖像(如：png, jpg, gif等)最小的數(shù)據(jù)單元。每一個位圖像素都包含著一些自身的顯示信息(如：顯示位置,，顏色值,，透明度等)。

談到這里,，就得說一下,，retina下圖片的展示情況？

理論上,，1個位圖像素對應于1個物理像素,，圖片才能得到完美清晰的展示。

在普通屏幕下是沒有問題的,，但是在retina屏幕下就會出現(xiàn)位圖像素點不夠,，從而導致圖片模糊的情況。

用一張圖來表示：

如上圖：對于dpr=2的retina屏幕而言,，1個位圖像素對應于4個物理像素,，由于單個位圖像素不可以再進一步分割，所以只能就近取色,，從而導致圖片模糊(注意上述的幾個顏色值),。

所以，對于圖片高清問題,，比較好的方案就是兩倍圖片(@2x),。

如：200×300(css pixel)img標簽，就需要提供400×600的圖片,。

如此一來,，位圖像素點個數(shù)就是原來的4倍，在retina屏幕下,，位圖像素點個數(shù)就可以跟物理像素點個數(shù)形成 1 : 1的比例,，圖片自然就清晰了(這也解釋了之前留下的一個問題,，為啥視覺稿的畫布大小要×2？),。

這里就還有另一個問題,，如果普通屏幕下，也用了兩倍圖片,，會怎樣呢,？

很明顯，在普通屏幕下,，200×300(css pixel)img標簽,，所對應的物理像素個數(shù)就是200×300個，而兩倍圖片的位圖像素個數(shù)則是200×300*4,，所以就出現(xiàn)一個物理像素點對應4個位圖像素點,，所以它的取色也只能通過一定的算法(顯示結果就是一張只有原圖像素總數(shù)四分之一，我們稱這個過程叫做downsampling),，肉眼看上去雖然圖片不會模糊,，但是會覺得圖片缺少一些銳利度，或者是有點色差(但還是可以接受的),。

用一張圖片來表示：

針對上面的兩個問題,，我做了一個demo。

demo中,，100×100的圖片,，分別放在100×100，50×50,，25×25的img容器中,，在retina屏幕下的顯示效果。

條形圖,，通過放大鏡其實可以看出邊界像素點取值的不同：

圖1,，就近取色，色值介于紅白之間,，偏淡,，圖片看上去會模糊(可以理解為圖片拉伸)。

圖2,，沒有就近取色,，色值要么是紅，要么是白,，圖片看上去很清晰,。

圖3，就近取色,，色值介于紅白之間,，偏重，圖片看上去有色差,，缺少銳利度(可以理解為圖片擠壓),。

愛字圖，可以通過看文字”愛”來區(qū)分圖片模糊還是清晰（如果看上去不明顯,，請下載原圖）,。

幾個問題

這里說一下，移動端H5開發(fā),，在不同分辨率,，不同屏幕手機下會遇到的幾個經(jīng)典問題。

retina下,，圖片高清問題

這個問題上面已經(jīng)介紹過解決方案了：兩倍圖片(@2x),，然后圖片容器縮小50%。

如：圖片大小,，400×600;

1.img標簽

width: 200px; 
height: 300px; 

2.背景圖片

width: 200px; 
height: 300px; 
background-image: url([email protected]); 
background-size: 200px 300px; // 或者: background-size: contain; 

這樣的缺點,，很明顯，普通屏幕下：

1）同樣下載了@2x的圖片,，造成資源浪費,。

2）圖片由于downsampling，會失去了一些銳利度（或是色差）,。

所以最好的解決辦法是：不同的dpr下,，加載不同的尺寸的圖片。

不管是通過css媒體查詢,，還是通過javascript條件判斷都是可以的,。

那么問題來了，這樣的話,，不就是要準備兩套圖片了嘛,？(@1x 和@2x)

我想，做的好的公司,，都會有這么一個圖片服務器,，通過url獲取參數(shù)，然后可以控制圖片質量,，也可以將圖片裁剪成不同的尺寸,。

所以我們只需上傳大圖(@2x)，其余小圖都交給圖片服務器處理,，我們只要負責拼接url即可,。

如，這樣一張原圖（點擊預覽）,，可以類似這樣,，進行圖片裁剪：

// 200×200

// 100×100

(ps: 當然裁剪只是對原圖的等比裁剪,，得保證圖片的清晰嘛~)

retina下，border: 1px問題

這大概是設計師最敏感,，最關心的問題了,。

首先得說一下，為什么存在retina下,，border: 1px這一說,？

我們正常的寫css，像這樣border: 1px;,，在retina屏幕下,，會有什么問題嗎？

先來,，來看看下面的圖：

上面兩張圖分別是在iPhone3gs(dpr=1)和iPhone5(dpr=2)下面的測試效果,，對比來看，對于1px的border的展示,，它們是一致的,，并無區(qū)別。

那么retina顯示屏的優(yōu)勢在哪里,，設計師為何覺得高清屏下(右圖)這個線條粗呢,？明明和左右一樣的~

還是通過一張圖來解釋(原諒我再次盜圖)：

上圖中，對于一條1px寬的直線,，它們在屏幕上的物理尺寸(灰色區(qū)域)的確是相同的,，不同的其實是屏幕上最小的物理顯示單元，即物理像素,，所以對于一條直線,，iphone5它能顯示的最小寬度其實是圖中的紅線圈出來的灰色區(qū)域，用css來表示,，理論上說是0.5px,。

所以，設計師想要的retina下border: 1px;,，其實就是1物理像素寬,，對于css而言，可以認為是border: 0.5px;,，這是retina下(dpr=2)下能顯示的最小單位,。

然而，無奈并不是所有手機瀏覽器都能識別border: 0.5px;,，ios7以下,，android等其他系統(tǒng)里，0.5px會被當成為0px處理，那么如何實現(xiàn)這0.5px呢,？

最簡單的一個做法就是這樣(元素scale)：

.scale{ 
position: relative; 
} 
.scale:after{ 
content:""; 
position: absolute; 
bottom:0px; 
left:0px; 
right:0px; 
border-bottom:1px solid #ddd; 
-webkit-transform:scaleY(.5); 
-webkit-transform-origin:0 0; 
} 

我們照常寫border-bottom: 1px solid #ddd;,，然后通過transform: scaleY(.5)縮小0.5倍來達到0.5px的效果，但是這樣hack實在是不夠通用(如：圓角等),，寫起來也麻煩,。

當然還有其他好多hack方法，網(wǎng)上都可以搜索到,，但是各有利弊，這里比較推薦的還是頁面scale的方案,，是比較通用的,，幾乎滿足所有場景。

對于iphone5(dpr=2),，添加如下的meta標簽,，設置viewport(scale 0.5)：

這樣，頁面中的所有的border: 1px都將縮小0.5,，從而達到border: 0.5px;的效果,。

看一下實現(xiàn)后的效果圖對比(右圖為優(yōu)化過的)：

然而，頁面scale,，必然會帶來一些問題：

1）字體大小會被縮放

2）頁面布局會被縮放(如: div的寬高等)

這兩個問題后面講到…

多屏適配布局問題

移動端布局,，為了適配各種大屏手機，目前最好用的方案莫過于使用相對單位rem,。

基于rem的原理,，我們要做的就是: 針對不同手機屏幕尺寸和dpr動態(tài)的改變根節(jié)點html的font-size大小(基準值)。

這里我們提取了一個公式(rem表示基準值)

rem = document.documentElement.clientWidth * dpr / 10

說明：

1）乘以dpr,，是因為頁面有可能為了實現(xiàn)1px border頁面會縮放(scale) 1/dpr 倍(如果沒有,，dpr=1)。

2）除以10,，是為了取整,，方便計算(理論上可以是任何值)

所以就像下面這樣，html的font-size可能會：

iPhone3gs: 320px / 10 = 32px

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

iPhone6: 375px * 2 / 10 = 75px

對于動態(tài)改變根節(jié)點html的font-size,，我們可以通過css做,，也可以通過javascript做。

css方式,，可以通過設備寬度來媒體查詢來改變html的font-size：

缺點：通過設備寬度范圍區(qū)間這樣的媒體查詢來動態(tài)改變rem基準值,，其實不夠精確，比如：寬度為360px 和 寬度為320px的手機,，因為屏寬在同一范圍區(qū)間內(<375px),，所以會被同等對待(rem基準值相同)，而事實上他們的屏幕寬度并不相等，它們的布局也應該有所不同,。最終,，結論就是：這樣的做法，沒有做到足夠的精確,，但是夠用,。

javascript方式，通過上面的公式,，計算出基準值rem,，然后寫入樣式，大概如下(代碼參考自kimi的m-base模塊)

var dpr, rem, scale; 
var docEl = document.documentElement; 
var fontEl = document.createElement('style'); 
var metaEl = document.querySelector('meta[name="viewport"]'); 
scale = 1 / dpr; 
dpr = win.devicePixelRatio || 1; 
rem = docEl.clientWidth * dpr / 10; 
// 設置viewport,，進行縮放,，達到高清效果 
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ', 
initial-scale=' + scale + ',maximum-scale=' + scale + ', 
minimum-scale=' + scale + ',user-scalable=no'); 
// 設置data-dpr屬性，留作的css hack之用 
docEl.setAttribute('data-dpr', dpr); 
// 動態(tài)寫入樣式 
docEl.firstElementChild.appendChild(fontEl); 
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; 
// 給js調用的,，某一dpr下rem和px之間的轉換函數(shù) 
window.rem2px = function(v) { 
v = parseFloat(v); 
return v * rem; 
}; 
window.px2rem: function(v) { 
v = parseFloat(v); 
return v / rem; 
}; 
window.dpr = dpr; 
window.rem = rem; 

這種方式,，可以精確地算出不同屏幕所應有的rem基準值，缺點就是要加載這么一段js代碼,，但個人覺得是這是目前最好的方案了,。

因為這個方案同時解決了三個問題：

1）border: 1px問題

2）圖片高清問題

3）屏幕適配布局問題

說到布局，自然就得回答一下最初的留下的那個問題：如何在css編碼中還原視覺稿的真實寬高,？

前提條件：

1）拿到的是一個針對iPhone6的高清視覺稿 750×1334

2）采用上述的高清方案(js代碼),。

如果有一個區(qū)塊，在psd文件中量出：寬高750×300px的div,，那么如何轉換成rem單位呢,？

公式如下：

rem = px / 基準值;

對于一個iPhone6的視覺稿，它的基準值就是75(之前有提到),；

所以,，在確定了視覺稿(即確定了基準值)后，通常我們會用less寫一個mixin,，像這樣：

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

所以,，對于寬高750×300px的div，我們用less就這樣寫：

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

轉換成html,，就是這樣：

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

最后因為dpr為2,，頁面scale了0.5，所以在手機屏幕上顯示的真實寬高應該是375×150px,，就剛剛好,。

倘若頁面并沒有scale 0.5，我們的代碼就得這樣：

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

這樣的寬高,，我們往往是這樣得來的：

1）將750×1334的視覺稿轉成375×667的大小后,，再去量這個區(qū)塊的大小(感覺好傻)。

2）在750×1334量得區(qū)塊寬高是750×300px后，再口算除以2(感覺好麻煩),。

最后給出一張沒有布局適配(上圖)和用rem布局適配(下圖)的對比圖：

(上面的手機分別是：iPhone3gs, iPhone5, iPhone6)

很明顯可以看出,，rem適配的各個區(qū)塊的寬高都會隨著手機屏寬而改變，最最明顯的可以看一下圖片列表那部分,，最后一張圖視覺稿要求只出現(xiàn)一點點,，rem布局在任何屏幕下都顯示的很好。

字體大小問題

既然上面的方案會使得頁面縮放(scale),，對于頁面區(qū)塊的寬高,，我們可以依賴高清視覺稿，因為視覺稿本來就×2了,，我們直接量就可以了,，那么對于字體該如何處理呢？

對于字體縮放問題,，設計師原本的要求是這樣的：任何手機屏幕上字體大小都要統(tǒng)一，所以我們針對不同的分辨率(dpr不同),，會做如下處理：

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

(注意,，字體不可以用rem，誤差太大了,，且不能滿足任何屏幕下字體大小相同)

為了方便,，我們也會用less寫一個mixin：

.px2px(@name, @px){ 
@{name}: round(@px / 2) * 1px; 
[data-dpr="2"] & { 
@{name}: @px * 1px; 
} 
// for mx3 
[data-dpr="2.5"] & { 
@{name}: round(@px * 2.5 / 2) * 1px; 
} 
// for 小米note 
[data-dpr="2.75"] & { 
@{name}: round(@px * 2.75 / 2) * 1px; 
} 
[data-dpr="3"] & { 
@{name}: round(@px / 2 * 3) * 1px 
} 
// for 三星note4 
[data-dpr="4"] & { 
@{name}: @px * 2px; 
} 
} 

(注意：html的data-dpr屬性就是之前js方案里面有提到的，這里就有用處了)

根據(jù)經(jīng)驗和測試,，還是會出現(xiàn)這些奇奇葩葩的dpr,，這里做了統(tǒng)一兼容~

用的時候，就像這樣：

.px2px(font-size, 32);

當然對于其他css屬性,，如果也要求不同dpr下都保持一致的話,，也可以這樣操作，如：

.px2px(padding, 20);

.px2px(right, 8);

最后

上面對移動端H5高清和多屏適配的一些方案總結,，和知識講解,，不對的地方，還請指出來,。