前言

移動端適配是一個非常繁瑣的問題，當然，只要掌握了一些基礎的佈局方式之後，適配問題也不再是大問題。其實也沒有非常死板的適配方案，一般實際開發過程中也是根據專案實際情況採取不同的適配方案或者混合使用幾種。目前常用的佈局適配方案有百分比+flex佈局；以淘寶首頁為代表的 rem+viewport縮放 flexible 佈局方案；固定viewport，通過js動態修改html字型大小的rem佈局，這裡我先介紹第一種。

案例

騰訊課堂：https://m.ke.qq.com/
大家可以看下騰訊課堂移動端頁面的寫法，就是採用基本的佈局方式，使用px和百分比混合作為單位，用垂直方向padding（padding-top或padding-bottom）實現等比例盒子，使用flex彈性佈局，這幾種方式的混合使用，就可以實現裝置適配，而且書寫方式和PC一樣，只不過元素尺寸都要寫750設計稿的一半。

說明：以設計稿750畫素為例，我們佈局時都按一半算。
具體示例：

1.和PC一致的書寫，這裡有個重點就是什麼時候固定寬度，因為如果一個元素是700px，那你寫的時候肯定不能寫350px，如果這樣的話在350px寬以下的裝置下，該元素是展示不全的，會溢位甚至造成佈局錯亂。建議如果元素尺寸超過頁面尺寸一半時，採用百分比或者flex佈局，小於一半時固定寬度沒什麼問題。

2.使用垂直方向padding（padding-top或padding-bottom）實現等比例盒子，圖片等比例縮放。
使用padding實現比例盒子的原理是，當希望一個元素寬高比例保持不變，寬度百分比是根據父元素寬度計算，但是高度用百分比來寫的話，值是根據父元素的高度來算的，但是一般父元素高度不是固定的，而且固定了也不一定滿足元素的等比例伸縮要求。所以思考有沒有哪個屬性尺寸百分比單位是根據父元素寬度來計算的，答案是有，padding就可以，用垂直方向padding與父元素寬度的百分比計算關係，實現盒子的等比例縮放。

3.flex佈局，在騰訊課堂上面倒是沒有發現用到這種佈局，可能是相容性要求或者其他原因吧，不過沒關係，這不妨礙我們來學習flex佈局在配合其他佈局方式時的使用。
flex佈局的特點是彈性，能實現元素佈局的自適應，但是缺點是當子元素的寬度（這裡包括border，padding，margin）加起來已經超過比如比較小的螢幕尺寸320px時，元素會展示不全，這時就需要通過媒體查詢來調整元素的佈局了，所以對於多個固定寬度元素的flex佈局可能會比較繁瑣。





像這裡要使用flex佈局的話，在iphone 4/5 小螢幕裝置下，元素可能展示不下，所以需要媒體查詢的配合調整。

總結

這裡主要了解了在移動端和PC端書寫方式一致的佈局，和利用padding百分比單位的計算實現比例盒子，以及flex佈局方便的實現複雜佈局時需要注意的邊界溢位問題，掌握並熟練以上知識點，就能很好的實現移動端web頁面佈局。下篇我們就來聊聊rem佈局。