响应式布局

自从进入移动互联网时代，响应式布局这个词经常出现在 Web 设计和开发领域，它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验。

开始之前

在讲解响应式布局之前，需要先了解一下基础知识，只有对它们都有一定的了解，才能在做响应式布局时选取合适的技术方案。

像素

像素这个单位很常见，指的是图像中最小的单位，一个不可再分割的点，在计算机屏幕上一般指屏幕上的一个光点。例如常见的描述中 iPhone X 的分辨率是 1125x2436，一般指的是在长和宽上像素点的个数。但是在 Web 开发中，我们知道 iPhone X 的像素是 375x812，那么这又是怎么回事呢？这里需要讲到设备像素（Device Pixels）和虚拟像素，也可以叫 CSS 像素（CSS Pixels）或者逻辑像素，后面我们统一使用 CSS 像素这个称呼，在 Android 开发中可以叫设备无关像素（Device Independent Pixel，简写 dip）。设备像素很好理解，对应屏幕上光点的数量。

在科技发展到今天，屏幕分辨率已经达到人眼无法区分单个像素的程度，人眼无法在 iPhone X 宽不到 7cm 的屏幕上数出 1125 个像素点。Web 开发人员眼中的 1px 可能对应多个设备像素，Peter-Paul Koch 在他的博文中有详细的讲解《A pixel is not a pixel is not a pixel》。

比如在 iPhone X 上，设备像素是 1125x2436，而 CSS 像素是 375x812，那么一个 CSS 像素对应的是长和宽各 3 个设备像素，9个设备像素点。

  1. 1 css pixel = 3 x 3 device pixels

那个这个比值 3 就是我们平时所说的设备像素比（Device Pixel Ratio），简称为 DPR。DPR 它并不是一个单位，而是一个比值，这个比值可以在浏览器中通过 JavaScript 代码获取。

  1. // 设备像素比，在 iPhone X 中等于 3，在 iPhone 6 中等于 2
  2. window.devicePixelRatio

EM vs REM

EM

EM 是相对单位，相对于元素自身的 font-size，它不像像素是固定的单位，因此很适合用来做响应式布局。

  1. <style>
  2. h1 {
  3.   font-size: 20px;
  4.   margin: 1em; /* 1em = 20px */
  5. }
  6. p {
  7.   font-size: 14px;
  8.   padding: 1em; /* 1em = 14px */
  9. }
  10. .outer {
  11.   font-size: 12px;
  12. }
  13. .inner {
  14.   font-size: 2em;
  15.   padding: 1em; /* 1em = 24px*/
  16. }
  17. </style>
  18. <div class="outer">
  19.   <div class="inner"></div>
  20. </div>

如果当前元素没有设置 font-size，那么 1em 实际大小是多少？

  1. p {
  2.   padding: 1em; /* 1em 等于多少像素*/
  3. }

在上面的代码中没有设置 <p> 的 font-size，它会从继承父元素的字体大小，如果父元素也没有设置字体大小，会一直找到根元素 <html>，而 <html> 元素的默认 font-size 一般是 16px。有的元素有默认的字体大小，比如 <h1> 的 font-size 默认等于 2em，最终计算还是会追溯到最外层。

  1. <html>
  2. <head></head>
  3. <body>
  4.   <p>1em = 16px</p>
  5. </body>
  6. </html>

REM

REM = Root EM，顾名思义就是相对于根元素的 EM，是根据根元素来计算出CSS 像素点的大小。根元素就是 <html>，而它的默认字体大小是 16px。

  1. h1 {
  2.   font-size: 20px;
  3.   margin: 1rem; /* 1rem = 16px */
  4. }
  5. p {
  6.   font-size: 1rem; /* 1rem = 16px */
  7. }

所以，如果我们改变根元素的字体大小，页面上所有使用 rem 的元素都会被重新计算元素属性并重绘。

EM vs REM

EM 和 REM 都是相对单位，两者都可以用来做响应式布局的单位。根据它们的特性，EM 和 REM 互有优劣。

  • EM - 对于模块化的页面元素比较好，比如 Web Components 标签，标签内的元素都根据父元素计算像素大小，只需设置最外层父元素的字体大小可同时影响子元素，保持自定义元素具有一定的模块封闭性。但，EM 比较难以追溯，需要逐层向上排查显示设置了字体大小的元素。
  • REM - 方便是 REM 最大的好处，只需知道 <html> 的字体大小即可计算当前的实际像素大小。

有的开发者全部都用 REM，有些开发者全部用 EM，这其实都是不合理的用法。开发者应该视情况不同采用不同的单位，但在现在的环境下，REM 使用的更广泛一些。

开发者根据设计师提供的 UE 图进行开发时，测量出来的大小单位一般是像素，如果需要转换为 REM，可以采用 PostCSS 的插件 postcss-px2rem 自动转换为 rem 单位。

vw, vh，百分比

vw 和 vh

vw 和 vh 现在还不常见，但也逐渐开始被开发者使用，特别是在布局上。

  • vw - viewport width，视口宽度，1vw = 1% 视口宽度
  • vh - viewport height，视口高度，1vh = 1% 视口高度

vw 和 vh 的逻辑比较简单，100vw = 100% 视口宽度，视口（viewport）会在后面详细讲解。下面的代码演示如何在 iPhone X 上计算 vw 的实际 CSS 像素大小，vh 的计算方法和 vw 一样。

  1. <html>
  2. <head>
  3.   <meta name="viewport" content="width=device-width, initial-scale=1">
  4.   <style>
  5.   p {
  6.     width: 50vw; /* 1vw = 1 / 100 * 375px = 3.75px */
  7.   }
  8.   </style>
  9. </head>
  10. <body>
  11.   <p>50vw = 50% viewport width = 50% * 375px = 187.5px</p>
  12. </body>
  13. </html>

浏览器对 vw 和 vh 支持相对较晚，目前在 Android 4.4 以下的 Android Browser 上还不支持，但是国内主流应用的 WebView 内核都是自己定制的，内核版本都高于系统自带的，因此在国内 vw 和 vh 的支持度比 Can I Use 统计的要高很多，而且随着版本的推移，vw 和 vh 会更流行。

Can I Use 统计的 vw 和 vh 支持度列表

vw, vh vs 百分比

现在我们知道了，1vw = 1% 视口宽度，那么它们是不是等价呢？我们先来看一下下面的代码，同样还是以 iPhone X 为例。

  1. <html>
  2. <head>
  3.   <meta name="viewport" content="width=device-width, initial-scale=1">
  4.   <style>
  5.   .p1 {
  6.     width: 50vw; /* 1vw = 1 / 100 * 375px = 3.75px */
  7.   }
  8.   .outer {
  9.     width: 80vw;
  10.   }
  11.   .p2 {
  12.     width: 50%;
  13.   }
  14.   </style>
  15. </head>
  16. <body>
  17.   <p class="p1">50vw = 187.5px</p>
  18.   <section class="outer">
  19.     <p class="p2">50% = 150px</p>
  20.   </section>
  21. </body>
  22. </html>

将上面的代码在浏览器中运行，发现第二个 <p> 标签的实际宽度为 150px，不是 187.5px。其实原理非常简单，就和 EM 和 REM 一样，百分比相对于父元素的宽度来计算，而 vw 根据视口的宽度来计算。

所以再回顾上面的例子中的第二个 <p> 标签，.outer 元素的宽度为 80vw = 300px，那么其子 <p> 标签的宽度为 300px * 50% = 150px。

除 vw 和 vh 外，还有 vmin 和 vmax 元素，这里就不继续展开，感兴趣的开发者可以访问 《Fun with Viewport Units》了解更多，这篇文章中对 vw 和 vh 讲的很详细，还有不少示例。

Web 开发中还有很多其他的单位，如 in（英尺），mm（毫米），cm（厘米）等，但因为使用的不多，开发者仅作了解就可以。

弹性框

上面我们讲到了百分比和 vw/vh，它们都可以用来实现响应式的布局，但是不如我们接下来要讲的弹性框灵活，它不是单位，而是一种布局方式。

区别于传统的布局方式，如标准文档流、浮动布局和定位布局，弹性框（flexbox）布局更加灵活，弹性框中的元素可以弹性伸缩，可以定义排版方向，还可以指定 flex 元素的顺序。下面是一个简单的例子。

  1. <style>
  2. .container {
  3.   display: flex; /* 设置容器为弹性布局 */
  4. }
  5. .box {
  6.   width: 100px;
  7.   height: 30vh;
  8. }
  9. .b1 {
  10.   background: #009;
  11. }
  12. .b2 {
  13.   background: #06c;
  14. }
  15. .b3 {
  16.   background: #39f;
  17. }
  18. .b4 {
  19.   background: #6cf;
  20.   width: 50px;
  21. }
  22. </style>
  23. <div class="container">
  24.   <div class="box b1"></div>
  25.   <div class="box b2"></div>
  26.   <div class="box b3"></div>
  27.   <div class="box b4"></div>
  28. </div>

上面的例子在浏览器中的表现如下图所示，我们能看到，每个 <div> 元素都是横排，这是因为弹性布局默认排列为横向排列，我们可以通过 flex-direction 属性决定排列方向，同时在小于 350px 宽的浏览器里，会按比例自动缩小每个 <div> 的宽度。

弹性框在不同宽度浏览器下的表现

从上面的例子中，能发现，有两个重要的角色需要开发者关注，一个是容器，一个是其子元素。

容器样式属性

容器指的是 display: flex 的元素，它可以定义其他的属性，决定子元素的排列，如下。

  • flex-direction - 定义主轴方向，即子元素的排列方向，取值为 row, row-reverse, column 和 column-reverse，默认为 row，即水平从左到右
  • flex-wrap - 默认情况下，弹性布局会将所有元素都压缩到一行，可以通过设置 flex-wrap 告诉浏览器在适当时候换行，取值为 nowrap, wrap 和 wrap-reverse，默认为 nowrap
  • flex-flow - 这个属性值是 flex-direction 和 flex-wrap 的简写，如 flex-flow: row nowrap，等价于 flex-direction: row; flex-wrap: nowrap
  • justify-content - 定义子元素在主轴上对齐方式，取值为 flex-start, flex-end, center, space-between, space-around，默认为 flex-start
  • align-items - 定义子元素在垂直于主轴的交叉轴的排列方式，取值为 stretch, flex-start, flex-end, center, baseline，默认为 stretch，即如果没设置高度，将填满交叉轴方向
  • align-content - 定义了子元素在多条轴线上的对齐方式，如果只使用了一条轴线，那该属性不起作用，取值为 flex-start, flex-end, center, space-between, space-between, space-around 和 stretch，默认为 stretch

在弹性布局之前，开发者如果要实现子元素水平和垂直居中会比较麻烦，在弹性布局中，非常容易实现，只需要在容器上设置轴线对齐方式，如下代码所示。

  1. .container {
  2.   display: flex; /* 设置容器为弹性布局 */
  3.   justify-content: center; /* 设置在主轴上居中对齐 */
  4.   align-items: center; /* 设置在交叉轴上居中对齐 */
  5. }

子元素样式属性

同样，子元素也有很多新增的样式属性，如下：

  • order - 设置子元素在主轴方向上的顺序，取值为数字，从小到大排列，默认为 0
  • flex-grow - 定义子元素的放大比例，取值为数字，默认为 0
  • flex-shrink - 定义子元素的缩小比例，取值为数字，默认为 1
  • flex-basis - 定义在分配多余空间之前，子元素的默认大小，默认为 auto
  • flex - 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto
  • align-self - 覆盖父元素的 align-items 属性，可以让子元素自身采用不同的对齐方式，默认为 auto，继承父元素的 align-items

弹性布局非常灵活，属性值也足够应对大部分复杂的场景。可以阅读这篇文章查看详细的介绍《A Complete Guide to Flexbox》。

那么，开始之前需要了解的内容就到这了，接下来看如何实现响应式布局。

设置 viewport

支持响应式第一步，需要做的是设置页面的 viewport。移动端网页会在头部书写 viewport 的元标签，它告诉浏览器页面多大尺寸，是否需要缩放。

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

想要理解 viewport 可以阅读 Peter-Paul Koch 写的三篇文章，《A tale of two viewports — part one》，《A tale of two viewports — part two》，《Meta viewport》。

在早期，移动设备经常需要打开 PC 端的网页，早期的移动设备设备像素比较低，多为 320px，而 PC 端的网页宽度一般都很大，所以，如果将 PC 端的网页在移动设备上打开，会因为页面太窄而导致布局错乱。为了解决这个问题，浏览器会将页面默认 viewport 设置为一个较大的值（Safari 默认是 980px），所以 PC 端的网页在移动设备浏览器上都能正常打开，只是元素看上去比较小。

在上面的例子中，viewport 的值 width=device-width，告诉浏览器用 屏幕宽度（单位为 CSS 像素）来作为页面宽度渲染，在 iPhone X 下是 375px，不同的设备宽度可能不一样。这个视口被 Peter-Paul Koch 称为理想视口（ideal viewport），也是体验最好的视口大小。

viewport 设置前后对比图，右侧设置了 viewport

viewport 元标签的取值有 6 种，如下表所示

字段名取值说明
width正整数，device-width定义视口的宽度，单位是 CSS 像素，如果等于 device-width，则为理想视口宽度
height正整数，device-height定义视口的高度，单位是 CSS 像素，如果等于 device-height，则为理想视口高度
initial-scale0 - 10初始缩放比例，允许小数点
minimum-scale0 - 10最小缩放比例，必须小于等于 maximum-scale
maximum-scale0 - 10最大缩放比例，必须大于等于 minimum-scale
user-scalableyes/no是否允许用户缩放页面，默认是 yes

确保内容不会超出 viewport

设置了 viewport 为理想视口，如果在 iPhone X 上，有元素的宽度超出了 375px，那么就会溢出到视口外面，导致出现横向滚动条。无论是在 PC 端，还是移动端，用户的都习惯上下滚动，而不是左右滚动，强迫用户横向滚动或者缩小页面来浏览全部的内容，体验很不好。

因此，不能期望设置 viewport 宽度能解决适配问题，还需要开发者记住以下原则。

  • 不要使用大的固定宽度的元素，如果不考虑穿戴式设备，不要设置大于 320px 的宽度
  • 不应该让内容在某一个特定宽度的 viewport 下才能正常显示
  • 使用相对单位或者媒体查询让元素在不同大小的视口下适配

对于图片或者视频等嵌入式的元素，可以在站点 CSS 中添加下面的代码。

  1. img, embed, object, video {
  2.   max-width: 100%; /* 设置 img 等元素最大宽度威 100% */
  3. }

设置图片最大宽度前后对比，左侧没有设置 max-width 为 100%

使用媒体查询

媒体查询（media query）让开发者可以有选择性的应用不同 CSS，媒体查询提供了简单的判断方法，可以根据不同的设备特征应用不同样式，比如设备的宽度、类型、方向等，可以参考 MDN 上的文档《CSS 媒体查询》。

  1. <!-- 在 viewport 宽度大于 600px 时，应用 example.css 中的样式 -->
  2. <link ref="stylesheet" href="example.css" media="min-width: 600px">
  3. <style>
  4. /* 如果设备类型为屏幕并且 viewport 小于 800px 宽，设置 body 背景颜色为灰色 */
  5. @media screen and (max-width: 800px) {
  6.   body {
  7.     background: #ccc;
  8.   }
  9. }
  10. </style>

如果需要使用媒体查询应用的样式比较多，可以独立为一个文件，通过在 <link> 标签中设置媒体查询条件。

媒体查询支持很多设备特征，常用的主要是 viewport 的宽高和设备方向，如下表所示。

设备特征取值说明
min-width数值，如 600px视口宽度大于 min-width 时应用样式
max-width数值，如 800px视口宽度小于 max-width 时应用样式
orientationportrait|landscape当前设备方向，portrait 垂直，landscape 水平

如何选择 min-width 和 max-width 的取值，我们称为选择断点，主要取决于产品设计本身，没有万能媒体查询的代码。但经过实践，我们也总结了一套比较具有代表性的设备断点，代码如下。

  1. /* 很小的设备（手机等，小于 600px） */
  2. @media only screen and (max-width: 600px) { }
  4. /* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
  5. @media only screen and (min-width: 600px) { }
  7. /* 中型大小设备（横屏的平板, 大于 768px） */
  8. @media only screen and (min-width: 768px) { }
  10. /* 大型设备（电脑, 大于 992px） */
  11. @media only screen and (min-width: 992px) { }
  13. /* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
  14. @media only screen and (min-width: 1200px) { }

如果要对细分屏幕大小进行适配，可以查看文章，列出了详细的常见设备的媒体查询条件，《media queries for common device breakpoints》。

最佳实践

响应式文字

大多数用户阅读都是从左到右，如果一行文字太长，用户阅读下一行时容易出错，或者用户只会读一行文字的前半部分，而略读后半部分。在上世纪就有研究表明，一行 45 ～ 90 个英文字符是最好的，当然这要看是什么字体，一个中文汉字一般对应两个英文字符，所以，对于中国用户来说，一行文字合理的数量应该是 22 ～ 45 个字符。

字体大小对阅读体验同样重要，基本字体一般不小于 16px，行高大于 1.2em。

  1. p {
  2.   font-size: 16px;
  3.   line-height: 1.2em; /* 1.2em = 19.2px */
  4. }

而设备的尺寸多种多样，如果设计师希望在平板上将字体设置为 18px，开发者可以使用前面讲到的 REM 和媒体查询，代码如下。

  1. /* 在屏幕宽度大于 600px 的设备上使用下面的样式 */
  2. @media only screen and (min-width: 600px) {
  3.   p {
  4.     font-size: 1.125rem; /* 1.125rem = 16px * 1.125 = 18px */
  5.   }
  6. }

响应式图片

一图胜千言，图片占网页流量消耗的 60%，可见其在 Web 的重要性。在上文提到图片不要超出视口的宽度，给图片设置 max-width: 100%，这确实非常有作用，那还有没有其他需要我们注意的呢。

图片的质量

现代设备的 DPR (设备像素比）都很高，iPhone X 的 DPR 是 3，因此如果我们用 375px 宽的图片在 iPhone X 上显示，实际只能利用它三分之一的设备像素点，会让图片看起来很模糊，视觉体验较差。如果我们都用 3 倍分辨率的图片来显示，实际屏幕较小的设备无法完全显示如此高清晰度的图片，就会在显示时进行压缩，这对于实际屏幕比较小的设备来说会浪费较多带宽。

为此，图片质量也需要能响应式。

  1. <!-- 响应式图片 -->
  2. <img
  3.   srcset="example-320w.jpg 320w,
  4.           example-480w.jpg 480w,
  5.           example-800w.jpg 800w"
  6.   sizes="(max-width: 320px) 280px,
  7.          (max-width: 480px) 440px,
  8.          800px"
  9.   src="example-800w.jpg" alt="An example image">

这里 sizes 和 srcset 很多开发者比较陌生。在兼容性不好的浏览器里，会继续使用默认 src 属性中的图片。

srcset

定义了几组图片和对应的尺寸，格式比较简单，主要的两个部分是图片地址和图片固有宽度，单位为像素，但是这里使用 w 代替 px。

sizes

定义了一组媒体查询条件，并且指名了如果满足媒体查询条件之后，使用特定尺寸的图片。

如果开发者书写了上面代码中的图片，浏览器会根据下面的顺序加载图片。

  1. 获取设备视口宽度
  2. 从上到下找到第一个为真的媒体查询
  3. 获取该条件对应的图片尺寸
  4. 加载 srcset 中最接近这个尺寸的图片并显示

所以，如果我们在视口宽度为 375px 的设备上，会采用最接近 440px 的图片，example-480w.jpg。

如果对 srcset 和 sizes 还想了解更多，可以访问 MDN 的文档《响应式图片》。

图片艺术方向

我们提到将图片的 max-width 设置为 100%，图片就会在手机屏幕上压缩到视口的宽度，如果这张图片实际上很大，图片中的内容就会看不清，特别是如果图片主要内容集中在中间，如人像，浏览效果会比较差。遇到这样的情况，最好的方式是在不同的屏幕尺寸下采用不同的图片，让主要内容保持在视口中间，如下图。

艺术方向示意图，图片来源于 https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

HTML 标准中有一个标签 <picture>，允许我们在其中设置多个图片来源，就和 <video>，<audio> 标签一样。

  1. <picture>
  2.   <source media="(max-width: 799px)" srcset="example-480w-portrait.jpg">
  3.   <source media="(min-width: 800px)" srcset="example-800w.jpg">
  4.   <img src="example-800w.jpg" alt="An example img">
  5. </picture>

<picture> 标签的作用和上面在 <img> 中设置 sizes 和 srcset 一样，都能在不同的设备宽度下显示不同的图片，笔者更建议使用 <picture> 实现此效果。

图片的其他注意事项

响应式布局在 PWA 中是非常重要的概念，在实现响应式的同时，还需要关注响应式图片是否会带来性能问题。在开发过程中，还需要注意下面几个问题。

  1. 对图片进行懒加载
  2. 对于小的简单的图片，可以使用矢量图或者字体，保证在不同尺寸设备下都很清晰
  3. 对于尺寸小的图片，可以使用 Data URI 的方式，将图片转成 base64 内联在 CSS 或者 HTML 中，避免请求，但这样同样无法利用 HTTP 缓存，因此一般只对小于 1.5K 的图片做处理
  4. 挑选恰当的图片格式，PNG，JPEG 等，可以在 Android 下使用 WebP 格式
  5. 对图片进行压缩和优化
  6. 采用 CSS 和 CSS 动画代替一些简单的图片和动态图，如加载中 GIF 图

响应式布局

利用相对单位、flexbox、媒体查询等技术，开发者能应付各种类型的页面和布局，为了方便开发者能够快速上手，下面介绍 5 种常见的响应式布局模式。这些模式最初由 Luke Wroblewski 总结并提出。

为了更好的理解这些响应式布局，笔者准备了 5 个例子。

  1. # 从 GitHub 下载代码到本地 pwa-book-demo 目录
  2. $ git clone https://github.com/lavas-project/pwa-book-demo.git
  4. # 进入到 chapter02/responsive-web-design 目录
  5. $ cd chapter02/responsive-web-design
  7. # 安装 npm 依赖
  8. $ npm install -g edp
  10. # 启动 chapter02 responsive-web-design 示例
  11. $ edp ws start

启动完成之后，访问 http://localhost:8848/ 能看到 5 个不同的目录，如 mostly-fluid，点击目录里的 index.html 就能看到不同模式的效果，尝试拖动改变浏览器的大小吧。

第一种：大体流动（Mostly Fluid）

大体流动布局的主要特点是在大屏幕上，内容区域宽度是固定的，因此在多数设备上，主要布局结构并没有很大改变，如果屏幕宽度大于内容区域，就在内容左右留白。而在视窗宽度较窄时，会逐渐掉落呈堆放，如下图所示。

大体流动布局示意图

大体流动布局比较简单，往往只需要少量的媒体查询就可以实现，如下代码所示。

  1. <style>
  2. .box {
  3.   width: 100%;
  4.   height: 150px;
  5. }
  6. /* 设置各个区块的颜色 */
  7. .b1 {
  8.   background: #009;
  9. }
  10. .b2 {
  11.   background: #06c;
  12. }
  13. .b3 {
  14.   background: #39f;
  15. }
  16. .b4 {
  17.   background: #6cf;
  18. }
  19. .b5 {
  20.   background: #cff;
  21. }
  22. /* 在大于 450px 时，将 .b2, .b3 宽度设置为 50% */
  23. @media screen and (min-width: 450px) {
  24.   .b2, .b3 {
  25.     width: 50%;
  26.   }
  27. }
  28. /* 在大于 800px 时，将 .b1, .b2 宽度设置为 50%，让 .b3, .b4, .b5 平分一行 */
  29. @media screen and (min-width: 800px) {
  30.   .b1, .b2 {
  31.     width: 50%;
  32.   }
  33.   .b3, .b4, .b5 {
  34.     width: 33.333333%;
  35.   }
  36. }
  37. /* 定义最大宽度为 980px */
  38. @media screen and (min-width: 980px) {
  39.   .container {
  40.     max-width: 980px;
  41.     margin: auto;
  42.   }
  43. }
  44. </style>
  45. ...
  46. <div class="container">
  47.   <div class="box b1"></div>
  48.   <div class="box b2"></div>
  49.   <div class="box b3"></div>
  50.   <div class="box b4"></div>
  51.   <div class="box b5"></div>
  52. </div>

第二种：列掉落 （Column Drop）

列掉落，布局中的每列随着宽度变小而逐个掉落，在视口最小的时候，每个元素都纵向堆放。和大体流动布局不同点在于，列掉落布局不会设置最大宽度，如果视口足够大，列掉落布局也会填满整个页面。媒体查询的断点选择需要根据网页本身的内容来选择。

列掉落布局示意图

列掉落比大体流动布局要简单，代码如下。

  1. <style>
  2. /* 在大于 450px 时，将 .b1 和 .b2 放置在同一行，分别占据 30% 和 70% */
  3. @media screen and (min-width: 450px) {
  4.   .b1 {
  5.     width: 30%;
  6.   }
  7.   .b2 {
  8.     width: 70%;
  9.   }
  10. }
  11. /* 在大于 800px 时，.b1, .b3 各占 20% 区域，.b2 在中间占 60% */
  12. @media screen and (min-width: 800px) {
  13.   .b1, .b3 {
  14.     width: 20%;
  15.   }
  16.   .b2 {
  17.     width: 60%;
  18.   }
  19. }
  20. </style>
  21. ...
  22. <div class="container">
  23.   <div class="box b1"></div>
  24.   <div class="box b2"></div>
  25.   <div class="box b3"></div>
  26.   <div class="box b4"></div>
  27.   <div class="box b5"></div>
  28. </div>

第三种：布局移位（Layout Shifter）

布局移位是最灵活的布局方式，它不仅仅将元素按照从前到后，从上到下排列，有时还会改变元素的位置。

布局移位布局示意图

代码如下：

  1. <style>
  2. /* 在大于 800px 时，将 .b1 和 .b4 放置在同一行，分别占据 20% 和 80% */
  3. @media screen and (min-width: 800px) {
  4.   .b1 {
  5.     width: 20%;
  6.   }
  7.   .b4 {
  8.     width: 80%;
  9.   }
  10. }
  11. </style>
  12. ...
  13. <div class="container">
  14.   <div class="box b1"></div>
  15.   <div class="box b4">
  16.     <div class="box b2"></div>
  17.     <div class="box b3"></div>
  18.   </div>
  19. </div>

第四种：微调（Tiny Tweaks）

微调，意思就是在视口发生变化时，对内容进行一些小的调整，比如调整字体、图片大小或者元素间距等。

字体微调示意图

  1. <style>
  2. .b1 {
  3.   background: #39f;
  4.   text-align: center;
  5.   padding-top: 10%;
  6.   font-size: 1em;
  7. }
  8. @media screen and (min-width: 450px) {
  9.   .b1 {
  10.     font-size: 2em;
  11.   }
  12. }
  13. @media screen and (min-width: 800px) {
  14.   .b1 {
  15.     font-size: 4em;
  16.   }
  17. }
  18. </style>
  19. ...
  20. <div class="container">
  21.   <div class="box b1">字体大小</div>
  22. </div>

第五种：画布溢出（Off Canvas）

在画布溢出布局中，内容不是从上到下的，而是将不常用的内容，比如应用菜单和导航栏，折叠起来，留下一个打开的入口，只有当屏幕足够大的时候才显示。画布溢出布局很常见，不仅在 Web App 中，在 Native App 中使用更多。这样的布局一般都需要配合 JavaScript 使用。

画布溢出示意图

在示例中，我们通过 transform: translate(-275px, 0) 将左侧侧边栏隐藏在视口外，点击菜单后，菜单栏会从左侧划出。在页面视口大于 800 时，将布局改为 flexbox 弹性布局，直接显示左侧菜单栏，代码如下。

  1. <style>
  2.   nav {
  3.     width: 275px;
  4.     height: 100%;
  5.     position: absolute;
  6.     /* 将菜单栏隐藏起来 */
  7.     transform: translate(-275px, 0);
  8.     transition: transform 0.3s ease-in-out;
  9.     background: #39f;
  10.     z-index: 2;
  11.   }
  12.   nav.open {
  13.     transform: translate(0, 0);
  14.   }
  15.   /* 在视口大于 800px 时，将菜单栏直接显示出来 */
  16.   @media screen and (min-width: 800px) {
  17.     nav {
  18.       position: relative;
  19.       transform: translate(0, 0);
  20.     }
  21.     body {
  22.       display: flex;
  23.       flex-flow: wrap;
  24.     }
  25.     main {
  26.       width: auto;
  27.       flex: 1;
  28.     }
  29.   }
  30. </style>
  31. <nav></nav>
  32. <main>
  33.   <a id="menu">...</a>
  34. </main>
  35. <div id="mask"></div>
  36. <script>
  37.   let mask = document.querySelector('#mask')
  38.   let nav = document.querySelector('nav')
  39.   let menu = document.querySelector('a')
  41.   // 点击菜单，显示或隐藏菜单栏
  42.   menu.addEventListener('click', event => {
  43.     nav.classList.toggle('open')
  44.     mask.classList.toggle('open')
  45.   })
  46.   // 点击遮罩，隐藏菜单栏
  47.   mask.addEventListener('click', event => {
  48.     nav.classList.remove('open')
  49.     mask.classList.remove('open')
  50.   })
  51. </script>

以上就是比较常见的 5 种响应式布局模式，大多数情况下都需要多种模式同时使用。

总结

响应式布局从设计角度出发，借助视口设置、CSS 媒体查询等方法，使开发者可以更易于维护适用于不同尺寸屏幕的网页。在本节中，我们介绍了一些文字、图片以及布局方面常见的响应式设计最佳实践，开发者应用这些经验，可以更好的优化 PWA 在不同尺寸大小设备的用户体验。