布局，本质上就是处理窗口宽度和网页内容的关系。用户会使用浏览器打开不同大小的窗口宽度，网页内容应该如何适应这些窗口大小？网页布局通常可以分为:固定布局、流式布局、自适应布局和响应式布局。

1.固定布局

固定布局是最简单的方法。它的设计逻辑是将页面中的内容“固定”在屏幕上，内容不会随着自己的窗口宽度而改变。所有元素都以px为基本单位。当然，在固定布局中，窗口大小和页面内容有两个基本关系:窗口太大，页面元素居中，窗口太小，显示水平滚动条。固定布局的优点是这种方法比较简单。你只需要把页面设计好，不会有太多的兼容性问题。固定布局通常出现在旧的政府项目和网页的注册中。

2.流式布局

流式布局是最基本的更改布局。它的设计逻辑是将页面中的元素设计成流动的“水”。页面上设计了不同的“杯子”容器来容纳页面的内容。这里的“水”一般是指文字、图标，以及页面上一些重复的元素。杯子通常是我们设计的容器。它的高度是固定的，只会改变它的宽度，比如卡片，外容器的宽度等等。因为“杯子”的限制，水会按照杯子的宽度延伸流动，从而形成流动布局。使用流式布局，可以在一个页面中实现多种尺寸的小规模适配，开发成本低。如果屏幕尺寸跨度大，难度会更大。最常用的流式布局方式是通过网格系统确定整个“杯”的宽度，从而实时显示“水”。这里有两点需要注意:

在R&D水平，杯子的大小需要被限制。通常，它的最大值和最小值是固定的。超过最大值时，居中。当它处于流布局时，窗口超过其最大值，它固定在左侧，右侧用空白填充。小于其最小值的窗口显示水平滚动条。

流动的“水”溢出时需要考虑，即“水杯”的高度固定时，整个宽度装不下这么多“水”。通常，我们可以用“…”来标记它。这种想法也会体现在响应式的布局上。

3.适应性布局

自适应布局就是创建多个不同屏幕尺寸的不同设计稿，每个设计稿对应一个用户的实际尺寸范围。您可以通过更改屏幕分辨率来切换不同的设计。一般来说，自适应就是独立设计桌面、平板和移动页面，系统通过不同大小的屏幕断点/浏览器UA来适应不同的设计页面。

自适应主要是表达多种设备尺寸下切换的布局方式。还需要在不同设备之间使用流式布局等布局方式，而不同设备之间屏幕分辨率的差异会涉及到一个关键点，屏幕断点。

屏幕断点，又叫媒体查询@媒体，因为屏幕大小在整个设计中是极其复杂的。除了我们常见的尺寸:1920，1080，1440，1366，用户还可以调整窗口大小，从而改变网页大小。屏幕的断点主要是判断屏幕的宽度来决定当前尺寸应该采用什么设计方案。关于屏幕断点的媒体查询在前端CSS3代码中提供给用户查看整个屏幕的宽度。而确定断点是这其中的核心。这里给你两个思路，实际设计会更复杂:

物理断点:即屏幕中已经划分好的断点，比如显示器的全宽，不同设备之间屏幕分辨率的差异，

设计断点:设计过程中一些必要的屏幕尺寸。比如上面提到的不同平台的设计。

其实屏幕断点并不是最终目的。最后我们想用屏幕断点来实现设计稿中页面中不同元素的处理方法。如果没有必要，我们完全可以忽略添加屏幕断点。

4.响应式布局

响应式布局(Responsive layout)是一种技术方案，保证一个页面中的所有设备(桌面、平板、移动)都能显示非常满意的效果。更像是流式布局和自适应布局的结合。通过快速响应屏幕大小，它可以对页面内容进行更详细的更改。通俗点说就是通过一套代码实现多页面，提炼多页面的内容，从而快速适应多种设备。