現在前端流行什么頁面布局方式？

前端常用頁面布局分為下面幾種：

1.靜態布局

給頁面元素設置固定的寬度和高度，單位用px。窗口發生變化時，會出現滾動條，內容會被遮擋。

優點：簡單方便，不存在兼容問題。

缺點：網頁無法根據用戶設備屏幕的寬度進行自適應。

2.流式布局

也叫100%布局。寬度單位為百分比。流式布局常用的設計模板:左側固定+右側自適應，左右固定寬度+中間自適應。

優點：可以適應不同尺寸的屏幕

缺點：如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定

3.響應式布局

使用meta標簽設置，頁面元素寬度隨窗口調整自動適配。采用自適應布局和流式布局的綜合方式，為不同屏幕分辨率范圍創建流式布局。

<meta name=”viewport” content=”divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>

優點：適應pc和移動端，如果足夠耐心，效果完美

缺點：

（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。

（2）要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本。

4.彈性布局

就是采用css3中的flex屬性。

優點：簡單、方便、快速

缺點：CSS3新特性,瀏覽器兼容性非常頭疼。而且手機瀏覽器對flex的支持也不是很理想。

以上就是我介紹的前端的4種布局方式。

我這有前端全套從入門到精通的視頻教程，路線，源碼，筆記。自學前端的小伙伴們有需要的可以關注我，免費分享給你們。