响应式布局代码怎么写_响应式布局终结篇 5 种常见布局模式

作者 | Brilliant Open Web团队

编辑 | Brilliant Open Web团队

本文继续在响应式布局上深入讨论，主要介绍 web 产品中常用的响应式布局的 5 种设计模式，并通过一些简单的代码介绍具体在实际的项目种是如何实现这些设计模式的。对布局模式的认识有助于你在项目实现最佳的响应式体验。

本文是响应式布局系列的最后一篇文章，不知道你看到这里有没有对响应式布局有更深的认识？下面是响应式布局的链接，如果忘了就再回去阅读一遍吧。

• 响应式布局基础篇 - 你了解这些长度单位吗？

• 响应式布局提高篇 - 图片正确的打开方式

• 响应式布局进阶篇 - viewport

• 响应式布局进阶篇 - 媒体查询

• 响应式布局进阶篇 - 响应式表格

在实现响应式布局的时候，我们通常会利用相对单位、flexbox、媒体查询等技术，通过这些技术我们能能应付各种类型的页面和布局，但是有没有一些好的设计范式来帮助我们快速的设计一个贴合应用场景的响应式布局呢？本文将介绍 5 种常见的响应式布局模式，能够帮助您在项目中方便的进行响应式布局的设计和实现。

这些模式最初由 Luke Wroblewski (https://www.lukew.com/ff/entry.asp?1514) 总结并提出。细心的你会发现，现在互联网上的绝大多数 web 产品进行响应式设计的时候，都能找到这 5 中布局的影子。

大体流动(Mostly Fluid)

大体流动布局的主要特点是在大屏幕上内容区域宽度是固定的，在多数设备上，主要布局结构不会发生很大改变，如果屏幕宽度大于内容区域，就在内容左右留白。而在小屏设备上，在视窗宽度较窄时，布局模块会逐渐掉落堆放，如下图所示是一个大体流动布局模式的示例图。

当设置布局的 max-width 为 980px 的时候，在 1200px 宽的时候，布局右侧有部分留白，和 800px 宽的设备上，整体的布局结构没有发生变化，但是占满了整屏，而在窄屏的 450px 宽的设备上布局模块开始逐级掉落，直到在 375px 宽的窄屏呈现为完全垂直堆放布局。

布局为上大体流动布局在代码实现上比较简单，往往只需要在 CSS 中编写少量的 媒体查询 代码就可以实现，主要是针对于不同的屏幕宽度，对各个布局模块进行不同的宽度设置，如下代码所示。

<style>.container {
      display: flex;  flex-flow: wrap;}.box {
      width: 100%;  height: 150px;}/* 设置各个区块的颜色 */.b1 {
      background: #009;}.b2 {
      background: #06c;}.b3 {
      background: #39f;}.b4 {
      background: #6cf;}.b5 {
      background: #cff;}/* 在大于 450px 时，将 .b2, .b3 宽度设置为 50% */@media screen and (min-width: 450px) {
      .b2, .b3 {
        width: 50%;  }}/*