自适应设计

此 Codelab 是 Google Developers 培训团队开发的“开发渐进式 Web 应用”培训课程的一部分。如果您按顺序学习这些 Codelab，将会充分发掘此课程的价值。

如需详细了解本课程，请参阅开发渐进式 Web 应用概览。

简介

本实验将介绍如何设置网站内容的样式，使其具有自适应性。

学习内容

  • 如何设置应用样式，使其在多种设备规格下都能良好运行
  • 如何使用 Flexbox 轻松将内容整理为列
  • 如何使用媒体查询根据屏幕尺寸重新整理内容

注意事项

  • HTML 和 CSS 基础知识

所需条件

  • 可访问终端/shell 的计算机
  • 连接到互联网
  • 文本编辑器

从 GitHub 下载或克隆 pwa-training-labs 代码库，并根据需要安装 LTS 版本的 Node.js。

如果您没有首选的本地开发服务器，请安装 Node.js http-server 软件包：

npm install http-server -g

导航到 responsive-design-lab/app/ 目录并启动服务器：

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

您可以使用 Ctrl-c 随时终止服务器。

打开浏览器，然后前往 localhost:8080/。

注意：请取消注册所有 Service Worker 并清除 localhost 的所有 Service Worker 缓存，以免它们干扰实验。在 Chrome 开发者工具中，您可以通过点击应用标签页的清除存储空间部分中的清除网站数据来实现此目的。

如果您使用的文本编辑器支持打开项目，请打开 responsive-design-lab/app/ 文件夹。这样可以更轻松地保持井井有条。否则，请在计算机的文件系统中打开相应文件夹。您将在 app/ 文件夹中构建实验。

此文件夹包含：

  • index.html 是我们示例网站/应用的主要 HTML 网页
  • modernizr-custom.js 是一种功能检测工具，可简化对 Flexbox 支持的测试
  • styles/main.css 是示例网站的层叠样式表

返回浏览器中的应用。尝试将窗口宽度缩小到 500 像素以下，并注意内容无法很好地做出响应。

打开开发者工具，然后在浏览器中启用设备模式。此模式会模拟应用在移动设备上的行为。请注意，网页已缩小，以便在屏幕上显示固定宽度的内容。这会带来不好的体验，因为对于大多数用户来说，内容可能会太小，迫使他们进行缩放和平移。

将 index.html 中的 TODO 3 替换为以下标记：

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

保存文件。刷新浏览器中的网页，然后在设备模式下检查该网页。请注意，网页不再缩小，内容比例与桌面设备上的比例一致。如果内容在设备模拟器中表现异常，请切换进出设备模式以重置模拟器。

注意：设备模拟功能可让您大致了解网站在移动设备上的显示效果，但要全面了解情况，您应始终在真实设备上测试网站。您可以详细了解如何在 Chrome 和 Firefox 上调试 Android 设备。

说明

元视口标记可以指示浏览器如何控制网页的尺寸和缩放比例。width 属性用于控制视口的大小。它可以设置为特定的像素数（例如 width=500），也可以设置为特殊值 device-width,，即缩放比例为 100% 时屏幕的宽度（以 CSS 像素为单位）。（还有对应的 height 和 device-height 值，这些值对于包含根据视口高度更改大小或位置的元素的网页非常有用。）

initial-scale 属性用于控制网页首次加载时的缩放级别。设置初始缩放比例可改善体验，但内容仍会溢出屏幕边缘。我们将在下一步中解决此问题。

了解详情

将 styles/main.css 中的 TODO 4 替换为以下代码：

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

保存文件。在浏览器中停用设备模式，然后刷新页面。尝试缩小窗口宽度。请注意，内容会在指定宽度下切换为单列布局。重新启用设备模式，并观察内容是否会调整以适应设备宽度。

说明

为确保文字清晰易读，当浏览器宽度达到 48rem（在浏览器默认字号下为 768 像素，或为用户浏览器中默认字号的 48 倍）时，我们会使用媒体查询。如需详细了解为什么 rem 是相对单位的理想选择，请参阅何时使用 em 与 rem。当媒体查询被触发时，我们会通过更改每个 div 的 width 来将布局从三列更改为一列，以填充整个页面。

灵活的框布局模块 (Flexbox) 是一种实用且易于使用的工具，可让您的内容实现自适应。借助 Flexbox，我们可以实现与之前步骤中相同的效果，但它会为我们处理所有间距计算，并提供大量可直接使用的 CSS 属性来构建内容。

在 CSS 中将现有规则添加为注释

通过将 styles/main.css 中的所有规则封装在 /* 和 */ 中，注释掉这些规则。我们将这些规则作为后备规则，以在“Flexbox 作为渐进增强功能”部分中 Flexbox 不受支持时使用。

添加 Flexbox 布局

将 styles/main.css 中的 TODO 5.2 替换为以下代码：

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

保存代码，然后在浏览器中刷新 index.html。在浏览器中停用设备模式，然后刷新页面。如果您缩小浏览器窗口，列会变窄，直到只剩下一列可见。我们将在下一个练习中使用媒体查询来解决此问题。

说明

第一条规则将 container div 定义为 flex 容器。这会为其所有直接子元素启用 Flex 上下文。我们混合使用旧语法和新语法来包含 Flexbox，以获得更广泛的支持（如需了解详情，请参阅更多信息）。

第二条规则使用 .col 类来创建等宽的 flex 子项。将具有类 col 的所有 div 的 flex 属性的第一个实参设置为 1，可将剩余空间在它们之间均匀分配。这比我们自己计算和设置相对宽度更方便。

了解详情

可选：设置不同的相对宽度

使用 nth-child 伪类将前两列的相对宽度设置为 1，将第三列的相对宽度设置为 1.5。您必须使用 flex 属性来设置每列的相对宽度。例如，第一列的选择器如下所示：

.container .col:nth-child(1)

将媒体查询与 Flexbox 搭配使用

将 styles/main.css 中的 TODO 5.4 替换为以下代码：

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

保存代码，然后在浏览器中刷新 index.html。现在，如果您缩小浏览器宽度，内容会重新排列成一列。

说明

当媒体查询被触发时，我们将 flex-flow 属性设置为 column，从而将布局从三列更改为一列。这与我们在第 5 步中添加的媒体查询实现了相同的效果。Flexbox 还提供了许多其他属性（例如 flex-flow），可让您轻松构建、重新排序和对齐内容，以便内容在任何情境下都能很好地呈现。

由于 Flexbox 是一项相对较新的技术，因此我们应在 CSS 中添加回退。

添加 Modernizr

Modernizr 是一种功能检测工具，可简化 Flexbox 支持的测试。

将 index.html 中的 TODO 6.1 替换为用于包含自定义 Modernizr build 的代码：

<script src="modernizr-custom.js"></script>

说明

我们在 index.html 的顶部添加了一个 Modernizr build，用于测试 Flexbox 支持。此代码会在网页加载时运行测试，并在浏览器支持 Flexbox 时将类 flexbox 附加到 <html> 元素。否则，它会将 no-flexbox 类附加到 <html> 元素。在下一部分中，我们将这些类添加到 CSS 中。

注意：如果我们使用的是 Flexbox 的 flex-wrap 属性，则需要专门为此功能添加一个 Modernizr 检测器。某些浏览器的旧版本部分支持 Flexbox，但不包含此功能。

逐步使用 Flexbox

我们来使用 CSS 中的 flexbox 和 no-flexbox 类，在不支持 Flexbox 时提供回退规则。

现在，在 styles/main.css 中，在每个被注释掉的规则前面添加 .no-flexbox：

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

在同一文件中，在其余规则前面添加 .flexbox：

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

如果您完成了可选的步骤 5.3，请务必为各个列的规则添加 .flexbox。

保存代码，然后在浏览器中刷新 index.html。网页应与之前看起来一样，但现在可以在任何设备上的任何浏览器中正常运行。如果您使用的浏览器不支持 Flexbox，可以在该浏览器中打开 index.html，测试回退规则。

了解详情

您已学习如何设置内容样式，使其具有自适应性。借助媒体查询，您可以根据用户设备的窗口或屏幕大小更改内容布局。

所学内容

  • 设置视觉视口
  • Flexbox
  • 媒体查询

资源

详细了解自适应设计的基础知识

详细了解如何将 Flexbox 用作渐进式增强功能

了解用于实现自适应 CSS 的库

详细了解如何使用媒体查询

如需查看 PWA 培训课程中的所有 Codelab，请参阅本课程的欢迎 Codelab。