前端常見布局，（pc端和移動端）

固定布局（PC端）

固定布局常用于Pc端，當然，如果練習時，也可以移動端使用，缺點就是相容性較差。大屏手機顯示網頁比較寬,固定布局寬度參照永遠是 320px,導緻左右兩 邊會有空白。

流動布局（百分比布局）

流動布局，就是用百分百的一個布局，這樣的優點便是自适應， 缺點是不夠靈活，添加元素時，需要更改其他元素的值。

流動布局與固定寬度布局基本不同點就在于對網站尺寸的測量機關不同，流動布局就是使用百分比來代替px作為機關。

flex布局（彈性盒布局）

PC端也使用flex布局，這是一個css3的新布局模式，也稱為彈性布局，他會根據頁面的剩餘寬度自動配置設定空間。該布局最主要的便是确定主軸和側軸。 它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可預測地展現出來。它能夠擴充和收縮 flex 容器内的元素， 以最大限度地填充可用空間。Flexbox布局最适合應用程式的元件和小規模的布局，而網格布局更适合那些更大規模的布局。

媒體查詢和rem布局（主流）

@media使用媒體查詢可以根據不同的裝置寬度加載不同的css樣式。rem是一個相對機關，會根據根節點的字型大小來計算的，使用媒體查詢和rem可以實作移動端的布局。具有較好的頁面效果，根據不同的裝置來設定不同根元素，然後通過計算來設定rem，進而達到良好的相容性，這是當下較為流行的布局方式。

響應式布局

響應式 Web 設計是一個讓使用者通過各種尺寸的裝置浏覽網站獲得良好的視覺效果的方法。例如，您先在計算機顯示器上浏覽一個網站，然後在智能手機上浏覽，智能手機的螢幕尺寸遠小于計算機顯示器，但是你卻沒有感覺到任何差别，兩者的使用者體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好。bootstrap的栅格系統就是一個響應式布局的較好的選擇。三星官網便是使用的響應式布局。

注：僅供學習和參考，若有侵權請聯系作者