首先我們瞭解下為什麼要有自適應佈局，多螢幕適配，這就得從前端介面的開發流程說起了。
前端介面開發流程：
一般來說，前端的介面開發，都要參考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）長得差不，暈。
先講到這兒吧，缺了什麼再補充。
參考：