1.固定布局 採用固定畫素 原理：設定好視口，跟pc端寫法一樣 版心320px即可
缺點：介面左右兩側有空白 而且元素略小 使用者體驗差
2.流式布局 原理採用%替代固定的px 限制布局盒子的最大寬度和最小寬度
優點：實現自適應 缺點：只做寬度適配，高度會被拉伸
3.響應式布局 rem+js、**查詢bootstrap
原理：設定根據標籤html的字型大小，利用**查詢 換算不同螢幕下對應的字型大小 利用相對單位人取代固定px 優點寬高字型代銷都能自適應 顯示效果好
rem布局
設定根標籤html的字型大小，利用**查詢換算不同的螢幕寬度下對應的字型大小，利用相對單位rem取代固定px 優點：盒子寬高大小都能自適應，可以達到自適應要求，
缺點：字型大小如果也設定rem單位的話會出現字型變化呈現線性的變大變小，其實字型的變化應該是非線性的取值，所以字型需要單獨利用**查詢
4.**查詢布局 原理：利用**查詢查詢不同的螢幕寬度給每個不同裝置都寫一套樣式檔案
缺點：複雜 工作量大 後期難維護
移動端常見布局方式
流動布局與固定寬度布局基本不同點就在於對 尺寸的測量單位不同，流動布局就是使用百分比來代替px作為單位。除此之外，流動布局使用浮動，float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow 溢位 避免了水平滾動條的出現。通過查詢當前瀏覽器...
移動Web開發 移動端常見布局 flex布局
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。當我們為父盒子設為 flex 布局以後，子元素的 float clear 和 vertical align 屬性將失效。伸縮布局 彈性布局 伸縮盒布局 彈性盒布局...
移動Web開發 移動端常見布局 rem布局
三 rem 查詢 四 less使用 建新檔案，字尾.less 1 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。rem的基準是相對於html元素的字型大小。比如 根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24p...