從設備像素比到移動適配

一.設備像素比(device pixel ratio )

視覺稿

在前端開發之前，我們會有一個psd文件，稱之為視覺稿。對於移動端開發而言，為了做到頁面高清的效果，視覺稿的規范往往會遵循以下兩點：
首先，選取一款手機的屏幕寬高作為基准(以前是iphone4的320×480，現在更多的是iphone6的375×667)。 對於retina屏幕(如: dpr=2)，為了達到高清效果，視覺稿的畫布大小會是基准的2倍，也就是說像素點個數是原來的4倍（對iphone6而言：原先的375×667，就會變成750×1334）。

物理像素(physical pixel)

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

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

設備獨立像素(也叫密度無關像素)，可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然后由相關系統轉換為物理像素。 所以說，物理像素和設備獨立像素之間存在着一定的對應關系，這就是接下來要說的設備像素比。

設備像素比(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，根據上面的計算公式，其物理像素就應該×2，為750×1334。

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

width: 2px;
height: 2px;

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現的大小(物理尺寸)是一致的，不同的是1個css像素所對應的物理像素個數是不一致的。
在普通屏幕下，1個css像素 對應 1個物理像素(1:1)。
在retina 屏幕下，1個css像素對應 4個物理像素(1:4)。

位圖像素

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

理論上，1個位圖像素對應於1個物理像素，圖片才能得到完美清晰的展示。在普通屏幕下是沒有問題的，但是在retina屏幕下就會出現位圖像素點不夠，從而導致圖片模糊的情況.一張圖來表示：

由於單個位圖像素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊(注意上述的幾個顏色值)。
所以，對於圖片高清問題，比較好的方案就是兩倍圖片(@2x)。如：200×300(css pixel)img標簽，就需要提供400×600的圖片。如此一來，位圖像素點個數就是原來的4倍，在retina屏幕下，位圖像素點個數就可以跟物理像素點個數形成 1 : 1的比例，圖片自然就清晰了(這也解釋了為啥視覺稿的畫布大小要×2)。

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

二.圖片高清顯示

兩倍圖片(@2x)，然后圖片容器縮小50%。如：圖片大小，400×600; 1.img標簽

width: 200px;
height: 300px;

2.背景圖片

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

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

同樣下載了@2x的圖片，造成資源浪費。
圖片由於downsampling，會失去了一些銳利度(或是色差)。

所以最好的解決辦法是：不同的dpr下，加載不同的尺寸的圖片。不管是通過css媒體查詢，還是通過javascript條件判斷都是可以的。

那么問題來了，這樣的話，不就是要准備兩套圖片了嘛？(@1x 和@2x)
一般公司都會有這么一個圖片服務器，通過url獲取參數，然后可以控制圖片質量，也可以將圖片裁剪成不同的尺寸。所以我們只需上傳大圖(@2x)，其余小圖都交給圖片服務器處理，我們只要負責拼接url即可。

可以類似這樣，進行圖片裁剪：

// 200×200
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_200x200.jpg

// 100×100
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_100x100.jpg

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

三.多屏適配布局問題

移動端布局，為了適配各種大屏手機，目前最好用的方案莫過於使用相對單位rem。
基於rem的原理，我們要做的就是: 針對不同手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基准值)。
這里我們提取了一個公式(rem表示基准值)

rem = document.documentElement.clientWidth * dpr / 10

說明： 乘以dpr，是因為頁面有可能為了實現1px border頁面會縮放(scale) 1/dpr 倍(如果沒有，dpr=1),。 除以10，是為了取整，方便計算(理論上可以是任何值)

對於動態改變根節點html的font-size，我們可以通過css做，也可以通過javascript做。

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

html{font-size: 32px;}
//iphone 6 
@media (min-device-width : 375px) {
   html{font-size: 64px;}
}
// iphone6 plus 
@media (min-device-width : 414px) {
    html{font-size: 75px;}
}
*/

缺點：通過設備寬度范圍區間這樣的媒體查詢來動態改變rem基准值，其實不夠精確，比如：寬度為360px 和 寬度為320px的手機，因為屏寬在同一范圍區間內(<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"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;


// 設置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);

// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 給js調用的，某一dpr下rem和px之間的轉換函數
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代碼，但個人覺得是這是目前最好的方案了。
因為這個方案同時解決了三個問題：
border: 1px問題
圖片高清問題
屏幕適配布局問題

四.如何在css編碼中還原視覺稿的真實寬高

前提條件：
拿到的是一個針對iphone6的高清視覺稿 750×1334
采用上述的高清方案(js代碼)。
如果有一個區塊，在psd文件中量出：寬高750×300px的div，那么如何轉換成rem單位呢？公式如：rem = px / 基准值;

所以，在確定了視覺稿(即確定了基准值)后，通常我們會用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，就剛剛好。

http://www.aliued.com/?p=3166

 

關注微信公眾號獲得及時推送