固定布局
在裡把viewport加好，根pc端一樣，設想整個網頁的寬度為320px居中即可，超出部分留白。
優點：思路沿用pc端，上手簡單。
缺點：大螢幕手機及手機橫屏時，兩邊是留白較大，且大螢幕手機下看起來頁面會特別小，操作的按鈕也很小，使用者體驗較差
流式布局
流動布局重點就是使用百分比來代替傳統px，但是高度大都是用px來固定住，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，優點是流動布局可以很好解決自適應需求，缺點是通過大量的百分比布局，會出現相容性的問題，且更適用於對橫向拉伸的設計元素，設計的時候存在很多侷限性。
響應式做法
根據目標使用者的訪問裝置的主要型別做三種或四種布局。每種布局有乙個區間即可利用**查詢@media，可以為不同解析度的裝置載入不同的樣式。這種方法的優點是可以相對精確的控制顯示效果，但可能需要對同乙個類書寫不同的樣式會導致**比較繁複，後期維護困難。
rem布局
rem是指相對於根元素的字型大小的單位,即根據html元素的font-size來計算大小。比如說html的font-size大小為100px,乙個div的width為1rem,則div的width大小為100px。
常見的移動端布局解決方案有哪些？原理如何？
固定布局 採用固定畫素 原理 設定好視口，跟pc端寫法一樣，版心設定320即可 優點 思路沿用pc端，上手簡單 缺點 介面兩側留有空白，使用者體驗差，而且元素略小 流式布局 原理 用百分比代替固定畫素，限制布局盒子的最大最小寬度 優點 實現自適應 缺點 只做寬度適配，高度會被拉伸 rem布局 原理 ...
常見的移動端布局解決方案有哪些？原理如何？
固定布局 採用固定畫素 原理 設定好視口，跟pc端寫法一樣，版心設定320即可 優點 思路沿用pc端，上手簡單 缺點 介面兩側留有空白，使用者體驗差，而且元素略小 流式布局原理 用百分比代替固定畫素，限制布局盒子的最大最小寬度 優點 實現自適應 缺點 只做寬度適配，高度會被拉伸 rem布局原理 設定...
移動端布局解決方案
flex布局 rem 百分比 px 畫素 絕對單位 pixel pix picture el element 影象元素 百分比 相對單位 相對於父級元素 rem 相對單位 root 根元素 相對於根元素字型大小的倍數 em 相對單位 相對于父元素字型大小的倍數 vh view height 檢視高 ...