推薦一篇文章：mobileweb適配總結，裡面說到的三種布局方法已經說的很詳細，還分別做了demo，我就不做了，這裡說說三種方案的原理以及我使用中的感受，希望各為互補，大家理解是最重要的。之前做過pc頁面的人聊的最多的就是『相容』，這是因為瀏覽器之間的差異引起的，不再多說。而移動端是基本沒有『相容』的問題的，全是css3，簡直不要太開心。可是『適配』問題隨之而來。
什麼是『適配』？做pc頁面的時候，我們按照設計圖的尺寸來就好，這個側邊欄200px，那個鏈結50px的。可是，當我們開始做移動端頁面的時候，設計師給了乙份寬度為640px的設計圖。那麼，我們把這份設計圖實現在各個手機上的過程就是『適配』。
那麼，我們怎麼開始呢？目前有三種方法：
這三種方法的核心都是視口的確定，現在以實現這個設計圖為例說明。
隨著螢幕寬度變化，頁面也會跟著變化，效果就和pc頁面的流體布局差不多，在哪個寬度需要調整的時候使用響應式布局調調就行（比如網易新聞），這樣就實現了『適配』。
原理
這種方法使用了完美視口：
設計圖、頁面寬度、viewport width使用乙個寬度，瀏覽器幫我們完成縮放。單位使用px即可。
目前已知荔枝fm、網易新聞在使用這種方法。有興趣的同學可以看看是怎麼做的。
原理
這種方法需要根據螢幕寬度來動態生成viewport，生成的 viewport 基本是這樣：
生成的viewport告訴瀏覽器網頁的布局視口使用 640px，然後把頁面縮放成50%，這是絕對的等比例縮放。、文字等等所有元素都被縮放在手機螢幕中。
這個gif圖說明了一切：
這也是**使用的方案，根據螢幕寬度設定rem值，需要適配的元素都使用rem為單位，不需要適配的元素還是使用px為單位。
具體使用方法見使用flexible實現手淘h5頁面的終端適配
使用這個方法的庫：
原理
實際上做了這幾件事情：
動態生成 viewport
螢幕寬度設定rem的大小，即給設定font-size
根據裝置畫素比（window.devicepixelratio）給設定data-dpr
這麼設定的好處是可以讓不同裝置的rem或px都顯示一樣的長度。
設定rem的意義在於得到乙個與螢幕寬度相關的單位，本來vw是最合適的，但是應該相容性的問題，只能使用rem來做。這樣，讓不同裝置的rem顯示一樣的長度。
vw是css3引入的單位，1vw = 1%視窗寬度上面的布局我們可以這樣：
這樣，無論螢幕寬度是多少，html.btn
.btn都是相對於螢幕的這麼寬，做到了適配。這兩個設定其實是幹的一件事，就是適配高密度螢幕手機的
px單位。而縮放是動態的，這樣，不同裝置下的[data-dpr="2"][data-dpr="3"]
px顯示一樣的長度。裝置畫素比是2，縮放為0.5，坦白說，我不覺得第一種方案能就做『適配』方案，因為太笨了，只能做一些列表等簡單排列的樣式。data-dpr為2；裝置畫素比是3，縮放為0.3333，data-dpr為3。但是一些複雜的活動頁的布局，用它可能就力不從心了：
這是我曾經做過的乙個頁面，『pk』要和左右兩張圖平行，而且下面的『不怒自威』、『義薄雲天』和下面的戰鬥力位置都要固定，不能有差。如果用第一種方案，可能各個元素就要絕對定位，然後各種百分比來定位了。且不說計算麻煩，而且辛苦一番最後的結果尺寸是和設計圖有出入的。
但是，第二種和第三種方案就絕對不會有這種情況，不會和設計圖有差。再說第二種和第三種方案的區別，目前我唯一知道的區別就是第三種方案更加靈活，有兩種單位可以使用，想讓元素適配的時候就用
rem，想讓文字不縮放的時候就用px。如果你沒有明白我以上講的，可能是我太囉嗦了，這是我在團隊內分享時做的ppt，應該沒那麼囉嗦了。當然你也可以看看下面的那些文章，不過最好的理解方式就是用這些方案做幾個頁面，到時候就明白了。
其他文章
我的部落格，歡迎訂閱微博粉絲太少，求粉
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...
移動端適配方案
先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...
移動端適配方案
尺寸 超小屏 768以下 小屏 768 992 中屏 992 1200 寬屏 1200以上 適配方案 適配細節 在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 i...