Question

现在前端流行什么页面布局方式？

Answer 1

前端常用页面布局分为下面几种：

1.静态布局

给页面元素设置固定的宽度和高度，单位用px。窗口发生变化时，会出现滚动条，内容会被遮挡。

优点：简单方便，不存在兼容问题。

缺点：网页无法根据用户设备屏幕的宽度进行自适应。

2.流式布局

也叫100%布局。宽度单位为百分比。流式布局常用的设计模板:左侧固定+右侧自适应，左右固定宽度+中间自适应。

优点：可以适应不同尺寸的屏幕

缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定

3.响应式布局

使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。

优点：适应pc和移动端，如果足够耐心，效果完美

缺点：

（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。

（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

4.弹性布局

就是采用css3中的flex属性。

优点：简单、方便、快速

缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。