Responsive design（译）

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

响应式网页设计(RWD)是一种网页设计方法，使网页在所有屏幕尺寸和分辨率下都能很好地呈现，同时确保良好的可用性。这是设计多设备网络的一种方式。在本文中，我们将帮助您了解一些可以用来掌握它的技术。

HTML基本上是响应性的，或者说流畅的。如果你创建了一个只包含HTML而没有CSS的网页，并且调整了窗口的大小，浏览器会自动重新流进文本以适应视窗。

虽然默认的响应行为可能听起来不需要解决方案，但在宽显示器上全屏显示的长行文本可能很难阅读。如果使用CSS减少宽屏幕行长度，例如通过创建列或添加显著的填充，那么对于缩小浏览器窗口或在移动设备上打开站点的用户来说，站点可能看起来很挤。

通过设置固定宽度来创建一个不可调整大小的网页也不起作用;这导致窄屏设备上出现滚动条，宽屏屏幕上出现太多空白空间。

响应式网页设计(Responsive web design，简称RWD)是一种针对各种设备和设备尺寸的设计方法，无论内容是在平板电脑、手机、电视还是手表上观看，都能自动适应屏幕。

响应式网页设计不是一项独立的技术——它是一种方法。它是一个术语，用于描述一组最佳实践，用于创建可以响应用于查看内容的任何设备的布局。

响应式设计这个术语是由Ethan Marcotte在2010年创造的，描述了使用流体网格、流体图像和媒体查询来创建响应式内容，正如Zoe Mickley Gillenwater在《灵活的网页设计》一书中所讨论的那样。

当时，建议使用CSS浮动进行布局，并使用媒体查询来查询浏览器宽度，为不同的断点创建布局。将流体图像设置为不超过其容器的宽度;它们的max-width属性设置为100%。当包含的列变窄时，流体图像会缩小，但当列增大时，流体图像不会大于其固有大小。这使图像能够缩小以适合其内容，而不是溢出它，但如果容器变得比图像更宽，则不会变得更大或像素化。

现代CSS布局方法本质上是响应式的，而且，自从Gillenwater的书和Marcotte的文章出版以来，我们在web平台中内置了大量的功能，使设计响应式网站变得更加容易。

本文的其余部分将向您介绍在创建响应式站点时可能需要使用的各种web平台特性。

Media Queries

媒体查询允许我们运行一系列的测试(例如，用户的屏幕是否大于一定的宽度，或一定的分辨率)，并有选择地应用CSS来为用户的需要适当地设置页面样式。

例如，下面的媒体查询测试当前网页是否显示为屏幕媒体(因此不是打印文档)，并且视口宽度至少为80rem。container选择器的CSS只会在这两点为真时才会被应用。

@media screen and (min-width: 80rem) {
  .container {
    margin: 1em 2em;
  }
}

您可以在样式表中添加多个媒体查询，调整整个布局或部分布局以最适合各种屏幕尺寸。引入媒体查询并更改布局的点称为断点（breakpoints）。

使用Media Queries的一个常见方法是为窄屏幕设备(例如手机)创建一个简单的单列布局，然后检查更宽的屏幕，当你知道你有足够的屏幕宽度来处理它时，实现一个多列布局。移动优先设计被称为mobile first设计。

如果使用断点，最佳实践鼓励使用相对单位而不是单个设备的绝对大小来定义媒体查询断点。

在媒体查询块中定义的样式有不同的方法;从使用媒体查询到基于浏览器大小范围的<link>样式表，到仅包含自定义属性变量来存储与每个断点关联的值。

在媒体查询的MDN文档中找到更多信息。

媒体查询可以帮助RWD，但不是必需的。可以使用灵活的网格、相对单位以及最小和最大单位值，而无需查询。

Responsive layout technologies

响应式网站建立在灵活的网格上，这意味着你不需要用像素级的完美布局来瞄准每一个可能的设备尺寸。

通过使用灵活的网格，您可以更改功能或添加断点，并在内容开始看起来不好的地方更改设计。例如，为了确保行长度不会随着屏幕尺寸的增加而变得不可读，你可以使用列;如果一个框在缩小时每行都有两个单词，那么可以设置一个断点。

几种布局方法，包括多列布局、Flexbox和Grid，默认情况下是响应式的。它们都假定您正在尝试创建一个灵活的网格，并为您提供更简单的方法。

Multicol

使用multicol，您可以指定列数，以指示您希望将内容分割成的最大列数。然后浏览器计算出这些元素的大小，这个大小会根据屏幕的大小而变化。

.container {
  column-count: 3;
}

如果指定列宽度，则指定的是最小宽度。浏览器将创建尽可能多的宽度的列，以适应容器，然后在所有列之间共享剩余的空间。因此，列的数量将根据有多少空间而变化。

.container {
  column-width: 10em;
}

您可以使用列简写来提供最大列数和最小列宽度。这可以确保行长度不会随着屏幕尺寸的增大而变得不可读，也不会随着屏幕尺寸的减小而变得太窄。

Flexbox

在Flexbox中，伸缩项收缩或增长，根据其容器中的空间在项目之间分配空间。通过更改flex-grow和flex-shrink的值，您可以指示项目在遇到更多或更少的空间时的行为。

在下面的示例中，每个伸缩项将在伸缩容器中占用等量的空间，使用flex: 1的简写，如布局主题Flexbox:灵活调整伸缩项的大小。

.container {
  display: flex;
}

.item {
  flex: 1;
}

CSS grid

在CSS网格布局中，fr单元允许在网格轨道上分配可用空间。下一个示例创建一个网格容器，其中三个轨道的大小为1fr。这将创建三个列轨道，每个列轨道占用容器中可用空间的一部分。您可以在“学习布局网格”主题的“灵活网格”单元下找到有关这种创建网格方法的更多信息。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Responsive images

要确保媒体不会大于其响应容器，可以使用以下方法:

img,
picture,
video {
  max-width: 100%;
}

这可以扩展介质，以确保它们不会溢出容器。使用单个大图像并将其缩小以适应小型设备，因为下载的图像比所需的大，这会浪费带宽。

响应式图像，使用<picture>元素和<img> srcset和sizes属性，可以提供针对用户视口和设备分辨率的图像。例如，您可以在移动设备上包含方形图像，但在桌面上显示与景观图像相同的场景。

<picture>元素允许提供多种尺寸以及“提示”(描述图像最适合的屏幕尺寸和分辨率的元数据)，浏览器将为每个设备选择最合适的图像，确保用户将下载适合他们正在使用的设备的图像大小。使用<picture>和max-width消除了使用媒体查询调整图像大小的需要。它可以将不同长宽比的图像定位到不同的视口大小。

您还可以直接使用不同尺寸的图像，从而为不同的屏幕尺寸提供不同的裁剪或完全不同的图像。

您可以在MDN的学习HTML部分找到响应式图像的详细指南。

Responsive typography

响应式排版描述了在媒体查询中更改字体大小，或使用视口单位来反映更少或更大的屏幕实际面积。

Using media queries for responsive typography

在这个例子中，我们想要将第一层标题设置为4rem，这意味着它将是基础字体大小的四倍。标题太大了!我们只希望这个巨型标题在更大的屏幕尺寸上，因此我们首先创建一个较小的标题，然后使用媒体查询用更大的尺寸覆盖它，如果我们知道用户的屏幕尺寸至少为1200px。

html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

我们已经编辑了上面的响应式网格示例，使用概述的方法也包括响应式类型。您可以看到，当布局变为两列版本时，标题是如何改变大小的。

在移动设备上，标题更小:

然而，在桌面上，我们看到更大的标题尺寸:

正如这种排版方法所示，您不需要将媒体查询限制为仅更改页面的布局。它们可以用来调整任何元素，使其在不同的屏幕尺寸上更可用或更有吸引力。

Using viewport units for responsive typography

Viewport units vw也可以用来启用响应式排版，而不需要在媒体查询中设置断点。1vw等于视口宽度的百分之一，这意味着如果你使用vw设置字体大小，它将始终与视口的大小相关。

h1 {
  font-size: 6vw;
}

这样做的问题是，用户失去了使用vw单位缩放任何文本集的能力，因为文本总是与视口的大小相关。因此，你不应该单独使用视口单位设置文本。

有一个解决方案，它涉及到使用calc()。如果你将vw单位添加到使用固定大小(如ems或rems)的值集中，则文本仍然可以缩放。从本质上讲，大众的单位增加了放大后的价值:

h1 {
  font-size: calc(1.5rem + 3vw);
}

这意味着我们只需要为标题指定一次字体大小，而不是为移动设备设置它并在媒体查询中重新定义它。当你增加视口的大小时，字体会逐渐增加。

The viewport meta tag

如果您查看响应页面的HTML源代码，您通常会在文档的<head>中看到以下<meta>标记。

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

这个视口元标签告诉移动浏览器，他们应该将视口的宽度设置为设备宽度，并将文档缩放到其预期大小的100%，这将以您期望的移动优化大小显示文档。

为什么需要这样做?因为移动浏览器倾向于谎报其视口宽度。

这个元标签的存在是因为当智能手机首次出现时，大多数网站都没有进行移动优化。因此，移动浏览器将视口宽度设置为980像素，以该宽度呈现页面，并将结果显示为桌面布局的缩小版本。用户可以放大和移动网站以查看他们感兴趣的部分，但它看起来很糟糕。

通过设置width=device-width，你可以用设备的实际宽度覆盖移动设备的默认值，比如苹果的默认宽度=980px。如果没有它，你的带有断点和媒体查询的响应式设计可能无法在移动浏览器上正常工作。如果你的窄屏布局的视口宽度为480像素或更小，但设备显示它的宽度为980像素，那么用户将不会看到你的窄屏布局。

因此，您应该始终在文档的头部包含viewport元标记。

Summary

响应式设计指的是一个站点或应用程序的设计，它对其所处的环境做出响应。它包含了许多CSS和HTML的特性和技术，现在基本上就是我们默认构建网站的方式。考虑一下你在手机上访问的网站——可能很少会遇到桌面版本缩小的网站，或者你需要横向滚动才能找到东西的网站。这是因为网络已经转向了这种响应式设计方法。

在您在这些课程中学到的布局方法的帮助下，实现响应式设计也变得更加容易。如果你是web开发的新手，那么比起响应式设计的早期，你可以使用更多的工具。因此，检查您使用的任何材料的年龄都是值得的。虽然历史上的文章仍然有用，但CSS和HTML的现代使用使创建优雅和有用的设计变得更加容易，无论访问者使用什么设备访问网站。