对于前端开发工程师来说，对于网页设计中，进行相应的布局，其布置的方式多种多样，对于不同的情况有不同的处理方法，但是很多设计师并不了解这些情况，接下来，小编带领大家了解网页布局设计五种方式。

一、静态布局

在传统的网页设计中，网页上所有元素的大小都是px。

1. 布局特征

无论浏览器的确切大小如何，页面的布局始终与第一次编写代码时相同。常规的PC站点是静态布局的，具有最小宽度，因此，如果宽度小于此值，则显示滚动条，如果宽度大于此值，则显示内容居中和背景。这种设计在PC上很常见。

2. 设计方法

PC:中心布局，所有样式使用绝对宽度/高度(px)，设计一个布局，在屏幕的宽度和高度已经调整，使用水平和垂直滚动条检查覆盖部分;

移动设备:建立一个单独的移动网站，设计一个单独的布局，并使用一个不同的域名，如wap。或者m。

优点:这种布局对设计师和CSS作者来说都是最简单的，并且没有兼容性问题。

缺点:很明显你不能改变用户的屏幕尺寸。目前，大多数门户网站、大多数企业PC广告网站都采用了这种布局。固定像素大小的web页面是匹配固定像素大小的显示的最简单方法。然而，这种方法不是一种完全兼容的方式来创建未来的web页面。我们需要一些方法来适应未知的设备。

二、流式布局

液体版面(也称为“流体”)的特点是页面元素的宽度根据屏幕分辨率进行调整，但总体版面不变。代表性围栏系统(网格系统)。

例如，将主网页正文的宽度设置为80%，最小宽度设置为960px。图像也被类似地处理(宽度：100%，最大宽度通常设置为图像本身的大小，以防止由于拉伸而失真)。

1.布局特征

当屏幕分辨率改变时，页面中元素的大小会改变，但布局不会改变。[如果屏幕太大或太小，这会导致元素显示不正确。

2.设计方法

宽度由百分比定义，高度主要由px确定。它可以根据视区和父元素的实时大小进行调整，以尽可能适应各种分辨率。为了避免对读数的影响过大或过小，我们经常使用max width/min width等属性来控制大小流范围。

在Web前端开发的早期历史中，这种布局方法被用于处理不同大小的PC屏幕(当时屏幕大小差异不会太大)。如今的手机开发也是一种常见的布局方式，但缺点是显而易见的：主要问题是如果屏幕尺寸跨度过大，就无法在屏幕上正常显示，与原来的设计相比，屏幕太小或太大。因为宽度是由百分比来定义的，但是高度和文本大小大多是由Px来确定的，大屏幕手机下的显示效果会变成一些页面元素的宽度拉得很长，但是高度和文本大小与原来一样(也就是说，这些东西不能“流化”)，而且显示很不一致

三、自适应布局

自适应布局的特点是为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以在不同的静态部分之间切换(页面元素的位置改变)，但在每个静态布局中，页面元素不会随着窗口大小的调整而改变。自适应布局可以看作是一系列静态布局。

1.布局特征

当屏幕分辨率改变时，页面中元素的位置将改变，但大小不会改变。

2.设计方法

使用@media media query为不同大小和介质的设备切换不同的样式。在良好的响应范围设计下，可以给自适应范围内的设备提供最佳的体验，实际布局固定在同一设备下。

四、响应式布局

随着CSS3媒体查询技术的出现，以及响应式设计的概念。响应式设计的目标是保证一个页面在CSS作者的所有终端(PC、手机、手表、冰箱web浏览器等)上都能显示出满意的结果，它的实现不局限于具体的方法，而是通常与流媒体布局+弹性布局相结合，再与媒体查询技术结合使用。--同时，在每种版式中，都应用了流式版式的概念，即页面元素的宽度随着窗口的调整而自动调整。也就是说，创建与屏幕分辨率范围相对应的多个流体布局。反应式布局可以看作是流程布局和自适应布局设计的结合。

响应几乎已经成为优秀页面布局的标准。

1.布局特征

在每个屏幕分辨率下都有一个布局样式，即元素的位置和大小会发生变化。

2.设计方法

媒体查询+流媒体布局。一般来说，@media query和grid system用于与布局的相对布局单位进行协调。实际上，通过CSS将不同的样式返回到单个web页面的不同设备上，是上述技术(如集成响应和流)的统称。

优点：适用于PC机和移动终端。如果足够耐心，效果是完美的。

缺点：(1)媒体查询有限，即只能枚举，只能适应主流的宽度和高度。(2) 要匹配足够的屏幕大小，工作量不小，而且设计还需要多个版本。

此代码将添加到响应页的页眉：

<meta name=“Applied device”content=“pc，mobile”><meta http equiv=“缓存控制”content=“无转换”>