此页面由 Cloud Translation API 翻译。

自适应设计基础知识

Pete LePage

Rachel Andrew

随着互联网上手机用户数量的增加，对网页设计人员而言，以合理方式能够很好地适应各种屏幕尺寸自适应设计，最初由 Ethan Marcotte 在 A List Apart 中是一种设计策略，及其设备通过更改网站布局来适应所使用的设备来实现这些功能。对于例如，自适应网站可能会在手机上以单列视图显示内容，平板电脑上为两列，桌面设备为三或四列。

</ph>

随着屏幕变宽，微件也会发生变化做出响应。

由于上网设备有这么多可能的屏幕尺寸，务必要让网站适应任何现有或未来的屏幕尺寸现代响应式设计也会考虑触摸屏等交互模式。我们的目标是优化所有用户的体验。

设置视口

针对各种设备进行了优化的网页必须在文档标头。此标记会告知浏览器如何控制网页的尺寸和缩放比例

为了尽可能提供最佳体验，移动浏览器会以桌面设备屏幕宽度（通常约为 980px，但因设备而异），然后尝试增大字号并使内容看起来更美观缩放内容以适应屏幕。这可能会导致字体看起来不一致，需要用户放大才能查看内容并与之互动。

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

如果使用元视口值width=device-width，则网页将与屏幕宽度（以设备无关像素 (DIP) 为单位），这是一种标准的视觉像素单位（在高密度屏幕上可以由许多物理像素组成）。这个使页面重排内容以匹配不同的屏幕尺寸。

一个屏幕截图
因为其文字是非常缩小的，所以难以阅读 — </ph> 没有视口元标记的网页在加载时缩小了，导致文字难以阅读请在 Glitch 上查看示例。

以下内容的屏幕截图：
以便于用户阅读的文字大小显示在同一页面上。 — </ph> 设置视口元标记后，您无需放大即可阅读网页。请在 Glitch 上查看示例。

某些浏览器会保留旋转到横向模式时，保持网页宽度不变，然后进行缩放以填满而不是自动重排添加值 initial-scale=1 会告知浏览器将 CSS 像素与设备无关像素之间的 1:1 关系设为无论设备的屏幕方向如何，都可让页面充分利用整个空间横向宽度。

没有包含 width 或 initial-scale 的 <meta name="viewport"> 标记 Lighthouse 审查可以帮助您自动完成确保您的 HTML 文档正确使用视口元标记。

根据视口调整内容大小

无论是桌面设备还是移动设备，用户都习惯于滚动浏览网站不要在水平方向上移动强制用户水平滚动或滚动到缩小以查看整个网页会导致糟糕的用户体验。

在开发包含元视口代码的移动网站时，不小心创建的网页内容与指定的视口。例如，如果显示的图片宽度大于视口，则可能会导致水平滚动。为防止出现这种情况，请调整内容，使其适合视口。

内容尺寸不适合视口大小 Lighthouse 审核可帮助您自动执行检测溢出的过程内容。

图片

如果图片的尺寸固定，当图片大于视口。我们建议为所有图片的 max-width 指定 100%，这会缩小以适应可用空间，同时防止图片超出初始大小

在大多数情况下，可通过将以下内容添加到样式表中来实现：

img {
  max-width: 100%;
  display: block;
}

向 img 元素添加图片尺寸

即使您设置了 max-width: 100%，我们仍然建议您添加 width 和将 height 属性添加到 <img> 标记中，以便浏览器预留空间，加载前图片。这有助于防止布局偏移。

布局

因为不同设备的屏幕尺寸和宽度（以 CSS 像素为单位）相差很大（例如，在手机和平板电脑之间，甚至在不同的手机之间）、内容不应依赖特定的视口宽度才能正常显示。

过去，这需要以百分比形式设置布局元素。使用 Pixel 测量时，用户需要在小屏幕上水平滚动：

两列布局的屏幕截图，第二列的大部分内容不在视口之外 — </ph> 使用像素的浮动版式。请在 Glitch 上查看示例。

在较小的屏幕上，改用百分比会让列变窄每列始终占据相同百分比的屏幕宽度：

Flexbox、网格布局和 Multicol 等现代 CSS 布局技术可以更轻松地创建这些柔性网格。

Flexbox

如果您有一组不同大小的项，并且希望它们适合一排或多行，较小内容所占空间较小较大的文件，会占用更多空间

.items {
  display: flex;
  justify-content: space-between;
}

您可以使用 Flexbox 将内容显示为单行，或换行显示行。

详细了解 Flexbox。

CSS 网格布局

CSS 网格布局可创建灵活的网格。您可以改进较早的浮动广告使用网格布局和 fr 单元的示例，该单元表示容器中的可用空间

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

您还可以使用网格布局创建包含尽可能多的项的常规网格布局尽可能提供最佳服务可用曲目的数量会随着屏幕尺寸的增加而减少。以下演示展示了一个网格，其中包含任意数量的卡片每行最小为 200px。

详细了解 CSS 网格布局

多列布局

对于某些类型的布局，您可以使用多列布局（多列布局）。该函数使用 column-width 属性创建自适应列数。在下面的演示中，当存在可再容纳 200px 列。

详细了解 Multicol

使用 CSS 媒体查询实现自适应设计

有时您可能需要对布局进行更大范围的更改支持比前述技术所允许的技术水平更高的某些屏幕尺寸。这正是媒体查询的用武之地。

媒体查询是简单的过滤条件，可应用于 CSS 样式，基于呈现内容的设备类型确定这些样式。他们还可以根据设备功能（包括宽度、高度、屏幕方向）更改样式以及设备是否用作触摸屏。

如需提供不同的打印样式，您可以定位输出类型，包含用于打印样式的样式表：

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

您还可以使用媒体查询在主样式表中添加打印样式：

@media print {
  /* print styles go here */
}

对于响应性网页设计，最常见的查询是针对设备功能，因此您可以针对触摸屏或较小的屏幕自定义布局。

基于视口大小的媒体查询

借助媒体查询，您可以打造特定屏幕尺寸屏幕尺寸查询可以测试以下事项：

width（min-width、max-width）
height（min-height、max-height）
orientation
aspect-ratio

所有这些功能都得到了出色的浏览器支持。如需了解更多详情，包括浏览器支持信息，请参阅 width、 height、方向和宽高比到这里就结束了

基于设备功能的媒体查询

考虑到可用设备的种类，开发者无法做出这样的假设每台大型设备都是普通的台式机或笔记本电脑，或者触摸屏。媒体查询中新增的一些功能您可以测试某些功能，例如用于与设备互动，以及用户能否将指针悬停在上面元素。

hover
pointer
any-hover
any-pointer

请尝试在不同的设备上观看此演示，例如常规的桌面设备和手机或平板电脑

这些新功能在所有现代浏览器中都得到了很好的支持。详情请访问适用于 hover 的 MDN 页面， pointer 和任意指针。

使用 `any-hover` 和 `any-pointer`

any-hover 和 any-pointer 功能会测试用户是否可以按住指针覆盖元素（通常称为悬停），或者根本使用指针，即使而不是他们与设备互动的主要方式。请谨慎使用来避免强制触摸屏用户切换到鼠标。不过，如果需要，any-hover 和 any-pointer 会非常有用确定用户设备的类型例如，一台具有除了具有悬停能力。

如何选择断点

请勿根据设备类、任何产品、品牌名称或操作系统这会使您的代码难以维护。相反，内容会决定其布局如何变化以适应容器。

选择主要断点，方法是先从小屏幕开始，然后再逐渐扩展

先将内容设计为适合小屏幕，然后再展开屏幕直到需要断点为止这样，您便可尽可能减少断点，并根据内容进行优化。

以下示例详细介绍了天气预报微件示例（位于。第一步是让预测结果在小屏幕：

接下来，调整浏览器大小，直到元素之间的空间过大使该微件看起来很美观判定结果具有主观性，但高于 600px 确实太宽了

以下内容的屏幕截图：
商品之间有较大间隙的天气应用 — </ph> 在此大小下，应用的布局可能会发生变化。

如需在 600px 处插入断点，请在组件的 CSS：在浏览器尺寸为 600px 或更窄时使用的 CSS 当宽度大于 600px 时，使用此参数。

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

最后，重构 CSS。在针对 600px 的 max-width 的媒体查询中，添加仅适用于小屏幕的 CSS。在某个第 min-width 个（共 601px 个）添加适用于大屏幕的 CSS。

在必要时选择次要断点

除了在布局发生显著变化时选择主要断点之外，针对细微变化进行调整也很有帮助例如，调整元素上的外边距或内边距会很有帮助，或增大字体，使其在布局中更自然。

此示例遵循与上个示例相同的模式，从优化较小屏幕布局首先，在视口处于展开状态时宽度大于 360px。之后，当有足够的空间后将最高温度和最低温度区分开来使其处于同一条线上放大天气图标

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

对于大屏幕，我们建议限制预测面板的最大宽度因此不会占用整个屏幕宽度

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

优化文本，提高阅读量

经典的可读性理论建议，理想的列应包含 70 到 80 个每行字符（大约 8 到 10 个英文单词）。您可以考虑将断点。

桌面浏览器上的文本页面的屏幕截图 — </ph> 桌面浏览器中的相同文本，添加了一个断点来约束行长度。

在此示例中，位于 1em 的 Roboto 字体在小屏幕，而大屏幕需要断点。在这种情况下，如果浏览器宽度大于 575px，理想的内容宽度为 550px。

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

避免隐藏内容 (:#avoid-hiding-content)

根据屏幕尺寸选择要隐藏或显示的内容时，请务必谨慎。不要仅仅因为内容无法适合屏幕而将其隐藏。屏幕尺寸并没有预料到用户可能想看到什么内容例如，去除花粉天气预报的计数可能是导致春季过敏的严重问题然后根据这些信息决定是否可以出门。

在 Chrome 开发者工具中查看媒体查询断点

设置媒体查询断点后，请检查它们对您网站的外观。您可以调整浏览器窗口的大小来触发断点，但 Chrome 开发者工具有一项内置功能可以显示页面在不同断点。

显示天气应用已打开并选择宽度为 822 像素的开发者工具的屏幕截图。 — </ph> 在较宽视口尺寸下显示天气应用的开发者工具。

显示天气应用已打开并选择宽度为 436 像素的开发者工具的屏幕截图。 — </ph> 开发者工具以较窄的视口大小显示天气应用。

若要在不同断点下查看网页，请执行以下操作：

打开开发者工具。
开启设备模式。系统会在自适应模式下打开默认情况。
要查看您的媒体查询，请打开“设备模式”菜单，然后选择显示媒体查询。此时，您的断点会以彩色条显示在网页上方。
点击其中一个条形，即可在媒体查询处于活动状态时查看网页。右键点击某个条形可跳转到该媒体查询的定义。