Web 基础知识：响应式设计

本文是系列文章的一部分：Web 基础知识

响应式设计旨在解决一个常见的问题：多年来，设备和外形变得越来越多样化。

因此，我们必须知道如何处理内容显示可能出现问题的情况，并学习如何使用我们当前的 HTML 和 CSS 知识使其具有响应能力！

响应能力简介

响应式设计的核心原则是巧妙地调整你的内容，使其对所有用户都易于阅读。这意味着你可以隐藏、显示、替换和修改布局的某些部分，以更好地适应特定的场景。

实际上，这意味着我们将使用相对单位！但是，在某些情况下，您很可能仍会使用绝对单位。

绝对单位

您主要使用的绝对单位是px或像素。

单元	用法
px	填充、边距、边框、角半径、图标大小、阴影属性等。

但是当涉及到调整内容大小和检测配置变化时，我们需要更深入一些。

相对单位

不同语境下有不同的相对单位。请根据具体情况使用！

父母大小单位

单元	行为
%	相对于父元素。将内部元素的高度设置为50%将使其达到父元素高度的 50%。
fr	相对于父元素。根据容器大小设置一个分数值。

视口单位

单元	行为
vw	相对于视口的宽度。更改窗口的宽度将导致元素的宽度发生变化。
vh	相对于视口的高度。更改窗口的高度将导致元素的高度发生变化。

字体大小单位

单元	行为
em	相对于父元素的font-size。
rem	:root相对于的font-size。

印刷单位

单元	行为
ch	等于字体“0”字符的宽度。
ex	等于当前字体的 x 高度。x高度是指小写字符基线到顶部之间的高度。

现在让我们了解一下如何触发布局的变化。

---

响应式布局

为了构建响应式布局，我们必须检测内容所显示的视口大小。这通常使用@media查询来完成。

媒体查询

媒体查询是响应式设计的核心。它考虑了许多参数，允许进行大量的自定义。

然而，为了我们的目的，它们大多会显示如下：

@media screen and (min-width: 360px) {  /* Your changes here */}

• 该@media前缀告诉浏览器我们将开始为媒体查询指定属性。
• 这种screen表示法意味着我们只针对设备中显示的内容，而不是针对print其他内容。媒体查询允许我们轻松地针对两种不同的上下文进行自定义。
• 这and是规则之间的连接组织。
• 这(min-width: 360px)是我们的规则。 它告诉浏览器，只有在视口宽度{}等于或超过 时，内的任何内容才能触发。360px

在下面的演示中，按钮默认隐藏，直到有足够的空间显示它。为了实现这一点，我们使用了之前的规则。

@media screen and (min-width: 360px) {  .pfp-btn {    /* Overrides display: none; */    display: inline-block;  }}

通过这个简单的查询，我们成功更新了我们的内容，并在必要时隐藏了内容。

但在现实世界中，媒体查询会针对特定的设备规格，设置特定的断点值。让我们来了解一下断点。

断点

虽然屏幕尺寸增加了，边框变薄了，但断点基本保持不变。

NNGroup 网站上有大量关于断点的资源，但本质上，您将处理这些值：

宽度	断点
320px~480px	手机。 请注意，这些是手机断点的最极端示例。Android 和 iOS 的缩放级别不会低于 320pt，并且任何手机在纵向模式下显示内容的宽度都不会超过 420pt。
480px~768px	可折叠设备和更小的平板电脑。
768px~1280px	更大的平板电脑和笔记本电脑。
1440px~1920px	大型显示器。 1920px由于大型显示器尚未被广泛采用，因此无需赘述。

更上一层楼

现在我们已经了解了使用查询隐藏和显示元素的机制，我们将在一个非常简单的布局中使用它。

在下一个演示中，我们有一个包含两个侧边栏的布局。一个用于显示目录，另一个用于显示相关文章。

有两种不同的媒体查询，旨在逐步隐藏项目：

• 首先，我们隐藏相关内容，在768px。
• 然后是侧边栏，位于480px。

@media screen and (max-width: 480px) {  #toc {    display: none;  }}@media screen and (max-width: 768px) {  #related-articles {    display: none;  }}

笔记

我们使用idvalues( #) 来隐藏接口的特定部分，因为.side-container类是它们之间共享的！这使我们能够通过重用代码来减少不必要的重复！

在这个演示中，我们还使用了从Web 基础知识：Flexbox文章中获得的知识！

---

响应式排版

在设计响应式布局时，必须确保文本清晰易读。

正如我们已经讨论过的，有两种方法可以方便地调整文本大小。其中之一是使用rem相对于 的值:root font-size。另一种是em相对于父元素的 的值font-size。

它们都有不同的用例，知道何时使用它们很重要。

何时使用rem

在几乎所有情况下，rem建议使用 em 来表示文本值。 根em是浏览器根据用户文本大小偏好设置的值。基于 Chromium 的浏览器的大小如下：

文本大小（Chromium）	px价值
小的	14px
正常（默认）	16px
大的	20px
特大号	24px

设置文本样式

在基础级别设置文本样式时，请始终遵循rem。这可确保其与浏览器的文本大小一起缩放。

h1 {  font-size: 3rem;  line-height: 1;}
h2 {  font-size: 2.5rem;  line-height: 1;}
h3 {  font-size: 2rem;  line-height: 1.125;}

在下面的演示中，我们模拟了remtofont-size关系。

该演示还可以随着浏览器的扩展而扩展rem，但这不是必需的。

了解无障碍设施

如果你想深入了解无障碍功能，我们有一篇文章专门讲解了所有文本的最佳实践！

📝 Web 无障碍功能简介 (A11Y)

---

何时使用em

虽然em应用较少，但在某些情况下可以解决碎片化问题。 它主要用于设置文本元素或基于font-size父元素样式的元素。

值的一个非常好的用例em是将它们应用于<span>嵌套在h1、h2、 ...<p>元素中的元素。在这种情况下，<span>它们的样式本质上依赖于原始标签，因此，我们可以确保它们彼此同步缩放，而无需更新两个值。

让我们用一个演示来更好地说明这一点。在其中，我突出显示了此文本的特定部分。我们仍然可以完全控制font-size。

• 当用于em填充时，我们可以观察到高亮的大小始终与文本大小成比例。
• 当使用rem填充时，随着文本变大，高亮部分会相对变小。这是因为font-size不会影响 ，rem并且其值保持不变。

---

响应式图形

视频、图片和其他媒体类型都有特定的宽高比。在设计响应式应用时，我们必须确保它们保持各自的比例，以免内容被挤压或拉伸。

值得庆幸的是，CSS 为我们提供了aspect-ratio和object-fit属性！

使用aspect-ratio

我们可以通过声明以下内容轻松设置图像的纵横比：

img {  aspect-ratio: 16 / 9;}

它还接受以下值：

img {    aspect ratio: 0.5;}

img {    aspect ratio: auto;}

使用object-fit

该object-fit属性定义图像在其纵横比范围内的行为方式。

为了更好地说明这一点，我构建了一个演示，允许我们同时自定义aspect-ratio和object-fit！

---

下一步是什么？

现在我们已经了解了如何让设计流程的每个部分都具有响应式功能，是时候添加交互性了。下一章，我们将学习 JavaScript 的基础知识！

到时候见。