作为今年热门的设计潮流，响应式设计已经成为设计师的标准技能。今天，搜骐OEM从布局类型和布局实施的响应性设计上进行了深入的讲解。他们都有相当专业和详细的答案，如何实现布局，采取什么方式，

在讨论响应式布局之前，让我们先梳理一下网页设计中的整体页面布局。常见类型如下：

布局类型：

实现布局设计的方法有很多种。这里，基于页面的实现单元，有四种类型：固定布局、可切换固定布局、灵活布局和混合布局。

固定布局：

像素作为页面的基本单元，无论设备屏幕和浏览器的宽度如何，只设计一套大小；

可切换固定布局：

同像素为页面单元，参照主流设备尺寸，设计出几种不同宽度的布局。通过设置不同的屏幕大小或浏览器宽度来选择最合适的宽度布局；

灵活布局：

以百分比为页面的基本单元，能适应一定范围内设备屏幕和浏览器宽度的所有大小，并能利用有效空间来显示效果；

混合布局：

类似弹性布局，它能在一定范围内适应设备屏幕和浏览器的各种尺寸，并能利用有效空间来显示效果；只需将像素和百分比混合为页面单位即可。可切换固定布局、灵活布局和混合布局是目前可采用的所有响应式布局模式。

可切换固定布局的实现成本，但扩展性差；灵活布局和混合布局是实现响应布局的理想方式。只有针对不同类型的页面布局实现响应性设计，我们需要使用不同的实现方法。柔性布置适用于跨柱、等柱结构，而非等柱结构则常采用混合布置。

实现页面响应设计的方法有两种：桌面优先（从桌面到底部）；对于相同内容，布局响应需要不同的宽度布局设计；移动优先级（从移动终端到终端设计）；无论设计模式是基于哪种，要与所有设备兼容，都不可避免地对模块的布局进行一些更改（布局更改的关键点称为断点）。我们通过JS获取设备的屏幕宽度，以改变网页的布局。这个过程可以称为布局响应屏幕。常见方法如下：

1、布局不会改变，即整体模块布局不会更改

2、模块内容为挤压拉伸；

3、模块内容：线进料-瓷砖；

4、模块内容为：删除-添加；

5、布局更改，即页面中模块的总体布局发生变化

6、模块显示模式变更：隐藏展开；

7、修改模块数：删除-增加；

在很多情况下，单一的布局响应方式不能达到理想的效果，因此需要多种组合方式的组合，但原则上应尽量简单、轻便，而同一断点（布局变化的临界点称为断点）应保持统一的逻辑。否则，页面的实现过于复杂，也会影响整体体验和页面性能。