1 、静态布局

即传统网页设计模式，只需做一套尺寸的设计稿（比如 1280*800px），一旦装置解析度宽度小于 1280px，则出现横向滚动条，一旦装置解析度宽度大于 1280px，则内容居中显示，两边留白。（常见于新闻类、电商类、政府类网页），这种布局方式对设计师和前端而言是 zui 简单的。

2 、自适应布局

可以把自适应布局看作是静态布局的一个系列。自适应布局的特点是为不同的萤幕解析度定义固定布局，即建立多个静态布局。一个静态布局对应一个萤幕解析度，改变萤幕解析度可以切换不同的静态区域性，但页面元素不随视窗大小的调整发生变化。简而言之就是需要自适应几个终端，就需要出几套尺寸的设计稿。

3 、弹性布局

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的装置萤幕及浏览器宽度，并能完美利用有效空间展现 zui 佳效果。

4 、混合式布局

混合式布局就是为不同终端装置的萤幕解析度定义布局（适配各种尺寸的 PC 、手机、穿戴装置等等），在每个布局中，页面元素随着视窗调整而自动适配，混合了百分比、画素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。简而言之就是只需要一套设计稿适应多个终端。

自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本 zui 低，但拓展性比较差；而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点）保持统一逻辑，否则页面实现太过复杂也会影响整体体验和页面效能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。

我所接触的网站专案几乎也都是响应式开发，显然响应式已成为网页设计的标配，而不是什么奢侈品。所以，牢牢掌握响应式布局设计规范也是 ji 为必要的。