TailwindCSS：响应式设计

<https://www.tailwindcss.cn/docs/responsive-design>

响应式设计

使用响应式实用程序变体来构建自适应用户界面。概述 Tailwind 中的每个实用程序类都可以在不同的断点处有条件地应用，这使得构建复杂的响应式界面变得轻而易举，而无需离开 HTML。

受常见设备分辨率的启发，默认有五个断点：

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

要添加实用程序但仅使其在某个断点处生效，您所需要做的就是在实用程序前面添加断点名称，后跟 : 字符：

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="..." />

这适用于框架中的每个实用程序类，这意味着您可以在给定断点处更改任何内容 - 甚至是字母间距或光标样式之类的内容。下面是营销页面组件的一个简单示例，该组件在小屏幕上使用堆叠布局，在大屏幕上使用并排布局（调整浏览器大小以查看其实际效果）：

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img
        class="h-48 w-full object-cover md:h-full md:w-48"
        src="/img/building.jpg"
        alt="Modern building architecture"
      />
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        Company retreats
      </div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Incredible accommodation for your team
      </a>
      <p class="mt-2 text-slate-500">
        Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine?
        We have a list of places to do just that.
      </p>
    </div>
  </div>
</div>

以下是上面示例的工作原理：

• 默认情况下，外部 div 是 display: block，但通过添加 md:flex 实用程序，它在中型屏幕和更大屏幕上变为 display: flex。

• 当父级是 Flex 容器时，我们希望确保图像永远不会缩小，因此我们添加了 md:shrink-0 以防止在中型屏幕和更大屏幕上缩小。从技术上讲，我们可以只使用 Shrink-0，因为它在较小的屏幕上不会执行任何操作，但由于它只在 MD 屏幕上起作用，因此最好在类名中明确这一点。

• 在小屏幕上，图像默认自动为全宽。在中型屏幕及以上屏幕上，我们将宽度限制为固定大小，并使用 md:h-full md:w-48 确保图像为全高。

移动优先

默认情况下，Tailwind 使用移动优先断点系统，类似于您在 Bootstrap 等其他框架中可能使用的系统。这意味着无前缀的实用程序（如 uppercase）对所有屏幕尺寸都有效，而带前缀的实用程序（如 md:uppercase）仅在指定的断点及以上位置生效。

瞄准移动屏幕

这种方法最让人惊讶的地方是，要为移动设备设计样式，您需要使用实用程序的无前缀版本，而不是 sm: 前缀版本。不要将 sm: 视为“在小屏幕上”的意思，而将其视为“在小断点处”。

定位断点范围

默认情况下，由 md:flex 等规则应用的样式将应用在该断点处，并在较大的断点处保持应用状态。如果您想仅在特定断点范围处于活动状态时应用实用程序，请将 md 等响应修饰符与 max-\* 修饰符堆叠起来，以将该样式限制在特定范围内：

<div class="md:max-xl:flex">
  <!-- ... -->
</div>

Tailwind 为每个断点生成相应的 max-* 修饰符，因此可以立即使用以下修饰符：

Modifier	Media query
max-sm	@media not all and (min-width: 640px)
max-md	@media not all and (min-width: 768px)
max-lg	@media not all and (min-width: 1024px)
max-xl	@media not all and (min-width: 1280px)
max-2xl	@media not all and (min-width: 1536px)

定位单个断点

要定位单个断点，请通过将 md 等响应修饰符与下一个断点的 max-* 修饰符堆叠来定位该断点的范围：

<div class="md:max-lg:flex">
  <!-- ... -->
</div>