響應式佈局----像素密度與viewport

首先舉個例子，iphone6s的像素分辨率爲1334x750,326ppi,4.7英寸。如圖
下面咱們一個一個來解釋。

像素密度

A.定義

326ppi表明的就是像素密度(pixels per inch),指的是每英寸的長度上排列的像素點數量。

a.屏幕分辨率

首先1334x750，表明的是屏幕分辨率，也就是說iPhone6s的屏幕是由縱向像素1334*橫向像素750個像素點組成。單位pixel。

b.物理尺寸

如圖能夠知道，4.7英寸也就指的是iPhone6s屏幕對角線的物理長度。1英寸是一個固定長度，等於2.54釐米。

B.像素密度的計算

像素密度=對角線分辨率/屏幕尺寸。以下
計算:勾股定理算出對角線的分辨率：√(1334²+750²)

對角線分辨率除以屏幕尺寸：√(1334²+750²)/4.7≈440dpi。

C.直觀感覺理解像素密度

像素密度越高，表明屏幕顯示效果越精細。Retina屏比普通屏清晰不少，就是由於Retina屏幕像素密度高。最明顯的就是iPhone 3GS和iPhone 4的區別。屏幕尺寸同樣由於屏幕分辨率相差一倍因此屏幕像素密度也相差一倍。顯示效果以下

如圖看出iPhone4顯示要比iPhone 3gs清晰的多。根本緣由是由於iPhone3gs的1個像素點的大小相對於iPhone4來講等於它屏幕的4個(2x2)像素大小。以下圖。

注意注意注意:這裏的1像素指的是物理設備的1個像素點。也就是說不一樣像素密度的物理設備的一個像素點的大小是不同的。也就意味着對於物理設備屏幕的單個像素點的大小是否是一個固定的大小。用稍微專業一點的話來講就是，單個的設備像素的大小是不定的。

重要概念理解

上面咱們討論的是關於物理設備的像素密度(再次強調:這裏的像素就是物理像素或者說是設備像素，對應於像素密度不一樣的設備具體像素點的大小都是不同大的。像素密度越大，像素點越小，顯示的細節就越多越豐富。反之則狀況恰好相反)。那麼接下來咱們要說的幾個重要概念是什麼呢？咱們先從css像素與設備像素開始討論。

A.css像素和設備像素

首先咱們須要明確一點:在咱們編寫CSS的時候的px和設備自身的px是沒有任何關係的。

• css pixel:瀏覽器使用的抽象單位，主要用來在網頁上繪製內容。

• device pixel:顯示屏幕的最小物理單位，每一個dp包含本身的顏色、亮度。

既然css pixel與device pixel沒有任何關係，那麼咱們在編寫頁面時怎麼設置多寬(用多少的css像素)的網頁才能適配不一樣的設備(才能覆蓋設備的像素)呢？？？爲了解決這個問題，咱們再引入一個重要的概念viewport。

B.viewport

viewport翻譯過來就是視口的意思。viewport有兩種,一種是layout viewport,還有一種是visual viewport。這兩種viewport的大小都是以css像素進行繪製的。

• 1.layout viewport:把layout viewport想象成爲不會變動大小和形狀的大圖。如今想像你有一個小一些的框架，你經過它來看這張大圖。（能夠理解爲「管中窺豹」）這個小框架的周圍被不透明的材料所環繞，這掩蓋了你全部的視線，只留這張大圖的一部分給你。你經過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個圖片的時候，你能夠不用管大圖，或者你能夠靠近一些（放大）只看局部。你也能夠改變框架的方向，可是大圖（layout viewport）的大小和形狀永遠不會變。
  計算:document.documentElement.clientWidth/Height

• 2.visual viewport:是頁面當前顯示在屏幕上的部分。用戶能夠經過滾動來改變他所看到的頁面的部分，或者經過縮放來改變visual viewport的大小。
  計算:window.innerWidth/Height

當你縮小或者放大頁面時，visual viewport的大小會發生變化。當你放大頁面，能看到頁面的內容也就越少，當你縮小頁面能看到的頁面內容也就越多。根本上是由於當你縮小或者放大網頁時，網頁上的css像素就變小或者變大了，可是layout viewport的大小是不變的。也就意味着，當css像素變大時，layout viewport中能容納的單位css像素也就變少了，所以visual viewport的大小就變小了。反之也是一個道理。這個過程當中，layout viewport並不會發生任何變化(固然，在窗口的大小發生變化的時候，layout viewport的大小也會隨之變化，窗口越大可以容納的CSS像素越多，layout viewport也就越大，反之亦然)。如圖

1:1

1:1.3

所以能夠把layout viewport想象成爲一個虛擬的"窗口"。窗口可大於或小於設備的可視區域(也就是visual viewport)，通常設備默認layout viewport大於visual viewport。這樣不會破壞沒有針對設備的瀏覽器優化的網頁的佈局，用戶能夠經過平移和縮放來看網頁的其餘部分。

部分機型默認layout viewport:

你也能夠經過上面給出的document.documentElement.clientWidth/Height在chrome控制檯中進行測試layout viewport的大小。

C.小總結1

根據以上的討論咱們知道了:

1. 咱們寫頁面時是在layout viewport上進行的佈局，用的是css像素，能夠由document.documentElement.clientWidth/Height計算。(與程序員相關)

2. 各類設備的屏幕分辨率表示的像素是設備像素能夠由screen.width/height計算。(與硬件產品相關)

3. 咱們觀看頁面時是經過visual viewport進行觀看的，用的也是css像素，能夠由window.innerWidth/Height來計算。(與用戶行爲相關)

設置layout viewport大小

經過上面的討論，咱們知道，屏幕的分辨率的設備像素與咱們編寫頁面時使用的CSS像素並無什麼直接關係。並且
問題1.從大的方面來看:首先，咱們編寫的CSS是在layout viewport中繪製。其次，從下圖能夠看出，設備分辨率和layout viewport也沒有什麼直接關係
問題2.從小的方面來看:首先， CSS像素在不放大和縮小的狀況下，在任何設備中的1個CSS像素都是同樣大的。其次，不一樣像素密度的設備，設備屏幕(與像素密度有關)中的1個設備像素的大小是各不相同的。能夠知道，在沒有進行任何設置的狀況下，單位設備像素與單位css像素也扯不上什麼關係。

設置viewport

若是咱們想要本身寫出來的頁面在各個設備下都工做良好，就會出現困難？所以爲了讓他們之間扯上關係，咱們便須要作一些設置。像下面這樣

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

每一個設置對應的意思

這樣設置了以後，咱們的layout viewport的大小也就與設備大小相等了(高度上也是相等的)。如圖。既然它們相等那麼能夠推理得出此時的單位設備像素和單位CSS像素在縮放比例爲1的狀況下，也就是相等的了。

這時候咱們顯示的頁面的屏幕和咱們佈局頁面的大小是同樣的，那麼在進行佈局的時候，也就容易了不少。

小總結2:

知道了這樣設置後，對於咱們佈局來講問題也就不大了。
1.咱們在layout viewport上佈局，這樣設置後，layout viewport的大小等於設備屏幕的大小
2.不一樣像素密度的設備的單位設備像素大小的變化也就會同步引發單位CSS像素大小的變化。也就是說，咱們在用CSS編寫網頁的時候，在不一樣像素密度的設備中的css像素大小是不同的是變化的。(這裏必定要理解)。

可是，這裏還有一個問題，iphone6 plus 414這個寬度是從哪裏來的呢？

像素密度與轉換系數

Android和IOS都會經過轉換系數讓控件適應屏幕的尺寸。而這個轉換系數就和最開始講的像素密度PPI有關。不一樣的PPI轉化係數不一樣。如圖
由圖能夠知道iphone6 plus的屏幕分辨率爲1242*2208，轉化係數爲3。1242/3=414。414便由此而得，這是設備自身進行的轉化，而咱們設置的layout viewport的大小也就等於設備自身轉換後的大小。