常見的移動端布局解決方案有哪些？原理如何？

①固定布局 採用固定畫素

原理：設定好視口，跟pc端寫法一樣，版心設定320即可

優點：思路沿用pc端，上手簡單

缺點：介面兩側留有空白，使用者體驗差，而且元素略小

②流式布局

原理：用百分比代替固定畫素，限制布局盒子的最大最小寬度

優點：實現自適應

缺點：只做寬度適配，高度會被拉伸

③rem布局

原理：設定跟標籤html字型的大小，利用**查詢不同螢幕寬度下字型的大小，利用相對定位rem代替固定px

優點：寬高字型大小都能自適應，顯示效果好

④**查詢布局

原理：利用**查詢不同的螢幕寬度，給每個不同的裝置都寫一套樣式檔案

缺點：複雜，工作量大，後期難維護

常見的移動端布局解決方案有哪些？原理如何？

固定布局 採用固定畫素 原理 設定好視口，跟pc端寫法一樣，版心設定320即可 優點 思路沿用pc端，上手簡單 缺點 介面兩側留有空白，使用者體驗差，而且元素略小 流式布局原理 用百分比代替固定畫素，限制布局盒子的最大最小寬度 優點 實現自適應 缺點 只做寬度適配，高度會被拉伸 rem布局原理 設定...

常見的移動端布局解決方案有哪些？原理如何？

固定布局 在裡把viewport加好，根pc端一樣，設想整個網頁的寬度為320px居中即可，超出部分留白。優點 思路沿用pc端，上手簡單。缺點 大螢幕手機及手機橫屏時，兩邊是留白較大，且大螢幕手機下看起來頁面會特別小，操作的按鈕也很小，使用者體驗較差 流式布局 流動布局重點就是使用百分比來代替傳統p...

移動端布局解決方案

flex布局 rem 百分比 px 畫素 絕對單位 pixel pix picture el element 影象元素 百分比 相對單位 相對於父級元素 rem 相對單位 root 根元素 相對於根元素字型大小的倍數 em 相對單位 相對于父元素字型大小的倍數 vh view height 檢視高 ...