1.靜態布局
在px中為頁面元素設置固定的寬度和高度。當窗口改變時，將出現滾動條，內容將被阻止。
優點:簡單方便，不存在兼容性問題。
缺點:網頁無法適應用戶設備屏幕的寬度。
2.流式布局
也叫100%布局。寬度的單位是百分比。流式布局常用的設計模板:左固定+右自適應，左固定寬度+中間自適應。
優點:可以適應不同尺寸的屏幕。
缺點:屏幕比例跨度過大，對於其原始設計來說太小或太大的屏幕都無法正常顯示。因為寬度是由% percentage定義的，所以高度和文本大小大部分是由px固定的。
3.響應式布局
使用meta標簽設置，頁面元素的寬度會隨著窗口的調整而自動調整。采用自適應布局和流式布局的綜合方法來為不同的屏幕分辨率範圍創建流式布局。
優點:適應pc和移動終端。如果妳足夠耐心，效果會很完美。
缺點:
(1)媒體查詢是有限制的，就是可以枚舉，只能適應主流。
(2)要匹配足夠多的屏幕尺寸，工作量不小，設計也需要多個版本。
4.靈活布局
就是使用css3中的flex屬性。
優點:簡單、方便、快捷。
缺點:CSS3的新功能，瀏覽器兼容性是個頭疼的問題。而且手機瀏覽器對flex的支持也不理想。