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

我认为当前最流行的响应式布局，为什么呢？因为现在移动互联网与传统互联网并驾齐驱，你不可能每时每刻都使用电脑，但是你可以 将手机时刻待在身上，遇到一些问题可以直接用手机查看，想看某些网站也可以直接用手机打开。

可能一个网站的访问量主要集中于手机用户，手机显示的内容样式肯定不能与电脑浏览器一致，因为那样页面中内容太小，操作麻烦，对用户不友好，用户体验极差。

现在较常用的页面布局方式主要分为以下五种：

1.固定布局，静态布局传统Web设计，网页上的所有元素的尺寸一律使用px作为单位，网页宽度一般为960px。网页布局始终按照最初写代码时的布局来显示，不受浏览器影响。如果浏览器宽度如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景

2.流式布局流式布局使用的是百分比，这位网页提供了很强的可塑性和流动性，与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变，这可能导致如果屏幕太大或者太小都会导致元素无法正常显示。

3.自适应布局自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式，例如宽度960px是一种样式，网页宽度1440px是另一种样式。改变屏幕分辨率可以切换不同的静态局部，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。

4.弹性布局使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。这种布局中包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位。默认的文字大小16px就是1em。

5.响应式布局每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，设计方法通常采用了媒体查询+流式布局，使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。为不同终端的用户提供更加舒适的界面和更好的用户体验。

我是萌新程序猿，科技圈的事情欢迎邀请我来回答！

码了这么多字，点个赞关注下再走吧！！！

关注萌新程序猿（本人咯），了解更多IT以及程序猿的知识！！

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

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种布局方式。

我这有前端全套从入门到精通的视频教程，路线，源码，笔记。自学前端的小伙伴们有需要的可以关注我，免费分享给你们。