CSS > 高清縮放原理分析

最近在研究 Retina 屏的適配問題，在具體方案討論以前，陸續作了一些理解筆記，現概括以下。具體方案的討論將另做文章。

1. <meta name="viewport"> 中的 viewport 是佈局視口

2. initial-scale 等的縮放是基於理想視口的

3. 理想視口由設備各自提供，理想視口的寬度也是設備的獨立像素

4. 所謂「獨立」是說這個設備獨立像素和像素密度無關

5. Retina屏增長了設備像素（物理像素），因此物理像素是有密度變化的

6. dpr = 物理像素/設備獨立像素 = 設備像素個數/設備理想視口寬度

7. dpr 在 JavaScript 中能夠經過 window.devicePixelRatio 獲取，在 CSS Media Query 中的名稱是 device-pixel-ratio

8. CSS像素和物理像素有區別，當1個CSS像素跨越更多物理像素時，就模糊了，反之則清晰，CSS像素被用在佈局視口上

9. 縮放能夠調整CSS像素和物理像素之間的比例關係。高清屏的縮放方案就是：如將佈局視口擴大爲理想視口的2倍，即理想視口縮放比例爲1/2，那麼CSS像素將比之前跨越更少的物理像素，從而保證清晰度

   • 佈局視口/理想視口 = CSS像素/設備獨立像素 = 1/縮放比例

   • 物理像素/設備獨立像素 = dpr

   • 頁面清晰要求 —— CSS像素/物理像素 = 1

   • 故 —— 縮放比例 = 1/dpr

從如下的關係比中來認知：

1. 佈局視口(CSS像素) : 設備獨立像素(理想視口) : 物理像素

2. 設備獨立像素能夠被看作一箇中間件：

   • 當 dpr=1 時，設 initial-scale=1.0，佈局視口等於設備獨立像素，設備獨立像素等於物理像素，故佈局視口等於物理像素，1CSS像素跨1物理像素

   • 當 dpr=2 時，設 initial-scale=1.0，佈局視口等於設備獨立像素，設備獨立像素是物理像素的一半，故佈局視口是物理像素的一半，1CSS像素跨4物理像素

   • 當 dpr=2 時，設 initial-scale=0.5，佈局視口是設備獨立像素的兩倍，設備獨立像素是物理像素的一半，故佈局視口等於設備像素，1CSS像素跨1物理像素

3. 再來研究高清屏，如下均設：設備獨立像素是 375px，dpr=2，物理像素則是 750px，元素DIV div{width: 375px}：

   • initial-scale=1.0 時，1CSS像素跨越4物理像素，故 DIV 是滿屏的

   • initial-scale=0.5 時，1CSS像素跨越1物理像素，故 DIV 只佔屏幕的一半，要想一樣保持全屏，就須要把 DIV 改成 div{width: 750px}

   • 因此，對於圖來講，第一種狀況下普通圖片就會拉伸，從而模糊；第二種狀況，就是使用高清圖

4. 爲不一樣屏幕的元素設置不一樣的像素單位過於麻煩，開發者就須要考慮是否有跨屏幕的尺寸單位解決方案

   • rem：當普通屏時，設 :root{font-size: 10px}，則 37.5rem 是 375px；高清屏時，設 :root{font-size: 20px}，則 37.5rem 是 750px，所以，咱們在 DIV 元素上只須要設置一個 37.5rem，在不一樣屏幕下更改根元素的字體大小，就能夠兼容全部屏幕了

   • vw 和 wh：相對於佈局視口大小計算尺寸，普通屏佈局視口是 375px，高清屏是 750px，不管怎麼變，vw/vh 單位的最後結果都會相應變化