响应式布局

自从进入移动互联网时代，响应式布局这个词经常出现在 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 css pixel = 3 x 3 device pixels

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

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

EM vs REM

EM

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

<style>
h1 {
  font-size: 20px;
  margin: 1em; /* 1em = 20px */
}
p {
  font-size: 14px;
  padding: 1em; /* 1em = 14px */
}
.outer {
  font-size: 12px;
}
.inner {
  font-size: 2em;
  padding: 1em; /* 1em = 24px*/
}
</style>
<div class="outer">
  <div class="inner"></div>
</div>

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

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

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

<html>
<head></head>
<body>
  <p>1em = 16px</p>
</body>
</html>

REM

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

h1 {
  font-size: 20px;
  margin: 1rem; /* 1rem = 16px */
}
p {
  font-size: 1rem; /* 1rem = 16px */
}

所以，如果我们改变根元素的字体大小，页面上所有使用 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 一样。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  p {
    width: 50vw; /* 1vw = 1 / 100 * 375px = 3.75px */
  }
  </style>
</head>
<body>
  <p>50vw = 50% viewport width = 50% * 375px = 187.5px</p>
</body>
</html>

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

`vw`, `vh` vs 百分比

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

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  .p1 {
    width: 50vw; /* 1vw = 1 / 100 * 375px = 3.75px */
  }
  .outer {
    width: 80vw;
  }
  .p2 {
    width: 50%;
  }
  </style>
</head>
<body>
  <p class="p1">50vw = 187.5px</p>
  <section class="outer">
    <p class="p2">50% = 150px</p>
  </section>
</body>
</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 元素的顺序。下面是一个简单的例子。

<style>
.container {
  display: flex; /* 设置容器为弹性布局 */
}
.box {
  width: 100px;
  height: 30vh;
}
.b1 {
  background: #009;
}
.b2 {
  background: #06c;
}
.b3 {
  background: #39f;
}
.b4 {
  background: #6cf;
  width: 50px;
}
</style>
<div class="container">
  <div class="box b1"></div>
  <div class="box b2"></div>
  <div class="box b3"></div>
  <div class="box b4"></div>
</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

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

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

子元素样式属性

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

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 的元标签，它告诉浏览器页面多大尺寸，是否需要缩放。

<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 元标签的取值有 6 种，如下表所示

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

确保内容不会超出 viewport

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

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

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

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

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

使用媒体查询

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

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

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

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

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

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

/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) { }

/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) { }

/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) { }

/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) { }

/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) { }

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

最佳实践

响应式文字

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

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

p {
  font-size: 16px;
  line-height: 1.2em; /* 1.2em = 19.2px */
}

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

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

响应式图片

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

图片的质量

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

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

<!-- 响应式图片 -->
<img
  srcset="example-320w.jpg 320w,
          example-480w.jpg 480w,
          example-800w.jpg 800w"
  sizes="(max-width: 320px) 280px,
         (max-width: 480px) 440px,
         800px"
  src="example-800w.jpg" alt="An example image">

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

srcset

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

sizes

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

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

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

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

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

图片艺术方向

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

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

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

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

图片的其他注意事项

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

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

响应式布局

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

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

# 从 GitHub 下载代码到本地 pwa-book-demo 目录
$ git clone https://github.com/lavas-project/pwa-book-demo.git

# 进入到 chapter02/responsive-web-design 目录
$ cd chapter02/responsive-web-design

# 安装 npm 依赖
$ npm install -g edp

# 启动 chapter02 responsive-web-design 示例
$ edp ws start

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

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

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

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

<style>
.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%;
  }
}
/* 在大于 800px 时，将 .b1, .b2 宽度设置为 50%，让 .b3, .b4, .b5 平分一行 */
@media screen and (min-width: 800px) {
  .b1, .b2 {
    width: 50%;
  }
  .b3, .b4, .b5 {
    width: 33.333333%;
  }
}
/* 定义最大宽度为 980px */
@media screen and (min-width: 980px) {
  .container {
    max-width: 980px;
    margin: auto;
  }
}
</style>
...
<div class="container">
  <div class="box b1"></div>
  <div class="box b2"></div>
  <div class="box b3"></div>
  <div class="box b4"></div>
  <div class="box b5"></div>
</div>

第二种：列掉落（Column Drop）

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

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

<style>
/* 在大于 450px 时，将 .b1 和 .b2 放置在同一行，分别占据 30% 和 70% */
@media screen and (min-width: 450px) {
  .b1 {
    width: 30%;
  }
  .b2 {
    width: 70%;
  }
}
/* 在大于 800px 时，.b1, .b3 各占 20% 区域，.b2 在中间占 60% */
@media screen and (min-width: 800px) {
  .b1, .b3 {
    width: 20%;
  }
  .b2 {
    width: 60%;
  }
}
</style>
...
<div class="container">
  <div class="box b1"></div>
  <div class="box b2"></div>
  <div class="box b3"></div>
  <div class="box b4"></div>
  <div class="box b5"></div>
</div>

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

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

代码如下：

<style>
/* 在大于 800px 时，将 .b1 和 .b4 放置在同一行，分别占据 20% 和 80% */
@media screen and (min-width: 800px) {
  .b1 {
    width: 20%;
  }
  .b4 {
    width: 80%;
  }
}
</style>
...
<div class="container">
  <div class="box b1"></div>
  <div class="box b4">
    <div class="box b2"></div>
    <div class="box b3"></div>
  </div>
</div>

第四种：微调（Tiny Tweaks）

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

<style>
.b1 {
  background: #39f;
  text-align: center;
  padding-top: 10%;
  font-size: 1em;
}
@media screen and (min-width: 450px) {
  .b1 {
    font-size: 2em;
  }
}
@media screen and (min-width: 800px) {
  .b1 {
    font-size: 4em;
  }
}
</style>
...
<div class="container">
  <div class="box b1">字体大小</div>
</div>

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

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

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

<style>
  nav {
    width: 275px;
    height: 100%;
    position: absolute;
    /* 将菜单栏隐藏起来 */
    transform: translate(-275px, 0);
    transition: transform 0.3s ease-in-out;
    background: #39f;
    z-index: 2;
  }
  nav.open {
    transform: translate(0, 0);
  }
  /* 在视口大于 800px 时，将菜单栏直接显示出来 */
  @media screen and (min-width: 800px) {
    nav {
      position: relative;
      transform: translate(0, 0);
    }
    body {
      display: flex;
      flex-flow: wrap;
    }
    main {
      width: auto;
      flex: 1;
    }
  }
</style>
<nav></nav>
<main>
  <a id="menu">...</a>
</main>
<div id="mask"></div>
<script>
  let mask = document.querySelector('#mask')
  let nav = document.querySelector('nav')
  let menu = document.querySelector('a')

  // 点击菜单，显示或隐藏菜单栏
  menu.addEventListener('click', event => {
    nav.classList.toggle('open')
    mask.classList.toggle('open')
  })
  // 点击遮罩，隐藏菜单栏
  mask.addEventListener('click', event => {
    nav.classList.remove('open')
    mask.classList.remove('open')
  })
</script>

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

总结

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

2.5 响应式布局

响应式布局

开始之前

像素

EM vs REM

EM

REM

EM vs REM

`vw`, `vh`，百分比

`vw` 和 `vh`

`vw`, `vh` vs 百分比

弹性框

容器样式属性

子元素样式属性

设置 viewport

确保内容不会超出 viewport

使用媒体查询

最佳实践

响应式文字

响应式图片

图片的质量

图片艺术方向

图片的其他注意事项

响应式布局

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

第二种：列掉落（Column Drop）

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

第四种：微调（Tiny Tweaks）

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

总结

results matching ""

No results matching ""

响应式布局

开始之前

像素

EM vs REM

EM

REM

EM vs REM

vw, vh，百分比

vw 和 vh

vw, vh vs 百分比

弹性框

容器样式属性

子元素样式属性

设置 viewport

确保内容不会超出 viewport

使用媒体查询

最佳实践

响应式文字

响应式图片

图片的质量

图片艺术方向

图片的其他注意事项

响应式布局

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

第二种：列掉落 （Column Drop）

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

第四种：微调（Tiny Tweaks）

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

总结

results matching ""

No results matching ""

`vw`, `vh`，百分比

`vw` 和 `vh`

`vw`, `vh` vs 百分比

第二种：列掉落（Column Drop）