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

1）選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(比如 iphone6的375×667)。

2）對于高清屏幕，為了達(dá)到高清效果，視覺稿的畫布大小會是基準(zhǔn)的2倍（對iphone6而言：原先的375×667，就會變成750×1334）。

 

問題1：對于dpr=2的手機(jī)，為什么畫布大小×2，就可以解決高清問題？

首先，我們要先了解一下 dpr 是什么？

  • 設(shè)備像素比(簡稱dpr)定義了物理像素和設(shè)備獨(dú)立像素的對應(yīng)關(guān)系，它的值可以按如下的公式的得到：

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

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

  • 設(shè)備獨(dú)立像素，這個點(diǎn)代表一個可以由程序使用的虛擬像素(比如: css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。  

 總而言之，就是不同的設(shè)備（不同的系統(tǒng)），他們有不同的dpr，這些設(shè)備在拿到前端寫好的頁面（即css像素布局）之后，會根據(jù)dpr占用不同數(shù)量的物理像素。但