學習筆記：自適應佈局，多屏幕適配

首先咱們瞭解下爲何要有自適應佈局，多屏幕適配，這就得從前端界面的開發流程提及了。

前端界面開發流程：

通常來講，前端的界面開發，都要參考UI（User Interface 用戶界面）給咱們的設計圖，也叫視覺稿，或者直接用Axure畫個原型給你，有多是高保真的（幾乎和真實的界面同樣），也多是低保真（只有佈局的勾勒），以上咱們均可以認爲是視覺稿。問題來了，咱們開發的界面要運行在各類不一樣屏幕大小，分辨率大小的設備上，而視覺稿通常只有一份（估計設計一份給你就累得夠嗆），那怎麼保證一份視覺稿，一種分辨率的視圖適用於各類不一樣分辨率的設備呢，難道咱們前端要開發多份網頁文檔去作適配嗎？那絕對累死的。

多分辨率屏幕適配：

嗯，接下來就引入多屏幕適配問題了。在此以前咱們得先了解幾專業名詞。

物理像素（physical pixel）：

屏幕上的圖像就是由不一樣顏色的像素點組成並呈現的，而這像素點就是物理像素，它是一種物理概念，是屏幕上最小的物理顯示單元。

分辨率（resolution）：

一款設備屏幕上橫豎方向的物理像素點個數即是分辨率了，如iphone3水平方向的像素點個數是320個，垂直方向480個，那麼它的分辨率就是 320x480。分辨率也是種物理概念，隨着設備生產下來就已經肯定好了，不可改變。

嗯，說到這，假如咱們的UI是按照iphone3的分辨率設計的視覺稿，也就是分辨率爲320x480，而視覺稿中有個正方形寬高分別是160px，240px，那麼它在iphone3中恰好大小佔了屏幕的四分之一。但咱們的頁面還要展現在iphone4（640x 960）上呢，那就變形了，不是佔四分之一了。可不但要展現在iphone4上，iphone6甚至iphoneN呢，可見多屏幕適配（適配不一樣的分辨率）方案就很是重要了。iphone就最早提出一套方案來解決多屏幕適配問題，一種相對單位：

邏輯像素（logic pixel）：

也叫虛擬像素，它是一種相對單位，相對於實際的物理像素，咱們的開發中使用的單位將會是邏輯像素，不是物理像素。而iphone中邏輯像素是以iphone3的分辨率爲基礎（320x480）。也就是說，在iphone3中，1px的邏輯像素等1px的物理像素。但到了iphone4（640x960）中，它會變成1px邏輯像素用2px物理像素來表示了，這樣的話，iphone3中元素的的大小（160px，240px）到iphone4（160x2px，240x2px）中展現的大小是否是也同樣了。盜圖：

而這個邏輯像素和物理像素的比值就是：

設備像素比（device pixel ratio）dpr：

iPhone的邏輯像素是320px，那iphone3的dpr是1，iphone4就是2，iphone5也是2。如此推理的話就能夠認爲iphone手機的屏幕有固定的邏輯像素（320px），這樣的話，咱們就只須要一份視覺稿，一份網頁文檔，讓dpr去自動幫咱們在不一樣分辨率的屏幕上作元素大小自適應就好了，什麼都不用去管。爽！。

可現實卻打臉了，由於iphone6後，邏輯像素都變了，再也不是320px。以後的7，8，9，x都是375px，至於爲何，我真不清楚，邏輯像素一直是320px，物理像素變多，dpr變大不就行，爲何連邏輯像素都變了。鬱悶，這樣的話，咱們就又得考慮不一樣的邏輯像素問題了。

我這裏一直在說iphone系列，其實android也出了一套和iphone同樣的措施，只是名字不一樣而已。簡單介紹一下：

設備獨立像素（device independent pixel）dip：

嗯，所謂的dip，其實就是邏輯像素哈，只不過android的邏輯像素更是多變。

那麼pc端呢，pc邏輯像素和物理像素大都是一比一關係的。它也有個新名稱：

CSS像素（CSS pixel）：

這樣說的話，其實邏輯像素，虛擬像素，設備獨立像素，CSS像素都是一類東西哈，只不過開發之中咱們用的px單位通常稱爲CSS像素，而iphone中又稱爲邏輯像素，固然android中就又稱爲設備獨立像素了。程序界就是喜歡起名字哈，好像換了個名稱就成爲本身的東西了，瞬間高大上。

讓咱們回到剛纔的問題，邏輯像素也在變該怎麼辦，這樣咱們就又出了一套解決方案：

自適應佈局：

主要的原理是：UI的視覺稿是基於某屏幕的分辨率進行設計，而後用邏輯像素除與視覺稿的物理像素，如320px/640獲得縮放比0.5，接下來視覺稿中的全部元素都是以該縮放比做爲乘法因子，如視覺稿中的正方形200px，在當前設備分辨率下合適的大小是，200x0.5=100px。這樣就能夠實現一份視覺稿，一份網頁文檔，在多種不一樣邏輯像素設備下的大小自適應了。固然實際的操做會有不少細節上的問題，目前市面上比較流行的就是手淘的解決方案，你們能夠先看看，使用Flexible實現手淘H5頁面的終端適配，我模仿它也寫了一份簡化版的，有空再貼出來吧。

還有幾個相關的關鍵詞，我順便講下：

每英寸物理像素個數（Pixels Per Inch）PPI：

這個單位主要是評價的屏幕細膩度的，並非分辨率越高的屏幕越好，由於有時屏幕太大，分辨率高，顯示質量任然很差，而是單位面積像素個數越多的屏幕顯示的圖像才越高清。對了，這有時也叫每英寸設備像素（device pixel inch）dpi。是否是和dip（device independent pixel）長得差不，暈。

先講到這兒吧，缺了什麼再補充。

參考：

• 移動端高清、多屏適配方案
  
• 前端：移動開發 - 像素、viewport
  
• 移動端webapp開發必備知識
  
• 移動端H5解惑-概念術語（一）