概述

到目前为止，本课程中我们看到的所有示例都有一个共同点。它们都不是为在较小屏幕（如智能手机或平板电脑）上显示而设计的。使 CSS 设计适用于多种尺寸屏幕的过程被称为 响应式设计。

在纯 CSS 中，响应式设计可能涉及复杂的 CSS 类和 @media 标签组合。Tailwind 提供了前缀，可以应用于任何 Tailwind 实用工具，以控制适用的屏幕尺寸集合。

响应式设计的复杂性

Tailwind 并没有消除响应式设计的所有复杂性。我们在为多种尺寸设计时仍需考虑许多因素。例如，我们需要思考在用户查看较小屏幕时，网站的哪些元素最为重要，需要突出显示。Tailwind 使得在不同尺寸下更容易尝试不同的设计，并能够一目了然地查看所有不同尺寸的设计。尽管如此，Tailwind 中的响应式设计可能导致极其冗长的 CSS 类声明，难以阅读。

在本章中，我们将了解 Tailwind 中的响应式实用工具以及常见的应用模式。

重要行为

在 CSS 中，某些属性可以根据屏幕宽度有条件地应用。这些条件由 @media 标签管理。设计发生变化的具体屏幕宽度称为 断点。在 Tailwind 中，我们可以为任意 Tailwind 实用工具添加前缀，以指定该实用工具应生效的最小屏幕宽度。但 Tailwind 的行为与其他响应式框架略有不同。 需要注意的一些重要行为包括：

• 任何响应式前缀都会使该实用工具在指定的屏幕宽度或更大屏幕上生效。
• Tailwind 实用工具定义了生效的最小宽度，但没有最大宽度。
• 如果未使用前缀，则默认最小宽度为 0——该实用工具始终生效。

如果我们定义某项内容适用于小屏幕宽度，Tailwind 会将其行为应用到小、中、大及更大的屏幕。如果仅希望在小屏幕上生效，我们应不带前缀定义小屏幕行为，并使用中等或宽屏前缀来取消该行为。

五种屏幕宽度

Tailwind 默认定义了五种屏幕宽度。对于这五种屏幕宽度，像素宽度指的是屏幕的逻辑宽度。在具有 Retina 屏幕的设备上，一个逻辑像素可能由多个物理像素组成，但我们仍然使用逻辑屏幕宽度。例如，iPhone 12 的宽度为 390 个逻辑像素，尽管其物理像素宽度为 1170。

这五种屏幕宽度如下：

• 小 (sm:)——640 像素及以上
• 中 (md:)——768 像素及以上
• 大 (lg:)——1024 像素及以上
• 超大 (xl:)——1280 像素及以上
• 超超大 (2xl:)——1536 像素及以上

下表列出了部分现有设备的宽度：

现有设备宽度

关键点是，如果我们定义某项内容为 sm:（例如，sm:m-2），那么该 m-2 实用工具将适用于所有宽度为 640 像素及以上的屏幕。如果希望在更大屏幕上更改该边距，可以使用更大的前缀定义一个实用工具。我们可确保较大的前缀优先于较小的前缀。我们可以使用 sm:m-2 md:m-4 lg:m-8 来实现随着屏幕宽度增加，边距逐步变宽的效果。

不带前缀的实用工具应描述我们在最小屏幕上看到的行为。我们通过引入带前缀的实用工具，在屏幕变大时调整行为。核心思想是，我们首先为移动设备定义设计，然后使用前缀调整为更大屏幕的布局。

否定实用工具

我们一直努力保持一致，即使在不明显的地方也指出否定向或默认实用工具。响应式实用工具正是这些否定向实用工具的使用场景。在 Tailwind 中，宽度前缀在其指定大小及更大屏幕上生效。如果希望在更宽的屏幕上移除某个实用工具，必须在更大的屏幕上显式否定它。例如，sm:shadow-xl md:shadow-none 使用 .shadow-none 重置实用工具来撤销 .shadow-xl。在同一元素上同时使用这两者，会在 640 到 768 像素之间的宽度范围内产生 box-shadow 属性。

注意：值得一提的是，将屏幕尺寸与其它前缀结合使用是完全合法的。例如，我们可以编写 md:hover:font-bold lg:hover:font-black。