响应式设计 - Tailwind CSS 中文网

概述

Tailwind 中的每个工具类都可以在不同的断点处有条件地应用，这使得在不离开 HTML 的情况下构建复杂的响应式界面变得轻而易举。

¥Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

首先，确保你已将视口元标记添加到文档的 <head> 中：

¥First, make sure you’ve added the viewport meta tag to the <head> of your document:

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

然后，要添加工具但只让它在某个断点生效，你需要做的就是在工具前面加上断点名称，后跟 : 字符：

¥Then to add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character:

<!-- 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="...">

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

¥There are five breakpoints by default, inspired by common device resolutions:

断点前缀	最小宽度	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) { ... }`

这适用于框架中的每个工具类，这意味着你可以在给定断点处更改任何内容 - 甚至是字母间距或光标样式之类的内容。

¥This works for every utility class in the framework, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles.

这是一个营销页面组件的简单示例，它在小屏幕上使用堆叠布局，在大屏幕上使用并排布局：

¥Here’s a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens:

<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>

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

¥Here’s how the example above works:

默认情况下，外部 div 为 display: block，但通过添加 md:flex 工具，它在中等屏幕和更大屏幕上变为 display: flex。

¥By default, the outer div is display: block, but by adding the md:flex utility, it becomes display: flex on medium screens and larger.
当父级是弹性容器时，我们希望确保图片永远不会缩小，因此我们添加了 md:shrink-0 以防止在中等屏幕和更大的屏幕上缩小。从技术上讲，我们可以只使用 shrink-0，因为它在较小的屏幕上什么都不做，但由于它只在 md 屏幕上起作用，所以最好在类名中明确说明。

¥When the parent is a flex container, we want to make sure the image never shrinks, so we’ve added md:shrink-0 to prevent shrinking on medium screens and larger. Technically we could have just used shrink-0 since it would do nothing on smaller screens, but since it only matters on md screens, it’s a good idea to make that clear in the class name.
在小屏幕上，图片默认自动全宽。在中等屏幕及以上屏幕上，我们已将宽度限制为固定大小，并使用 md:h-full md:w-48 确保图片为全高。

¥On small screens the image is automatically full width by default. On medium screens and up, we’ve constrained the width to a fixed size and ensured the image is full height using md:h-full md:w-48.

我们在此示例中仅使用了一个断点，但你也可以使用 sm、lg、xl 或 2xl 响应前缀轻松自定义其他尺寸的组件。

¥We’ve only used one breakpoint in this example, but you could easily customize this component at other sizes using the sm, lg, xl, or 2xl responsive prefixes as well.

移动端优先

¥Working mobile-first

默认情况下，Tailwind 使用移动设备优先的断点系统，类似于你在 Bootstrap 等其他框架中可能使用的系统。

¥By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.

这意味着不带前缀的工具（如 uppercase）对所有屏幕尺寸都有效，而带前缀的工具（如 md:uppercase）仅在指定断点及以上的断点处生效。

¥What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.

针对移动端屏幕

¥Targeting mobile screens

这种方法最常让人们感到惊讶的地方是，要为移动设备设置样式，你需要使用工具的无前缀版本，而不是带 sm: 前缀的版本。不要把 sm: 当成 “在小屏幕上” 的意思，把它当成 “在小断点处”。

¥Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning “on small screens”, think of it as “at the small breakpoint“.

请勿使用 sm: 来定位移动设备

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>

使用无前缀的工具来定位移动设备，并在较大的断点处覆盖它们

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

出于这个原因，通常最好先为设计实现移动布局，然后对任何对 sm 屏幕有意义的更改进行分层，然后是 md 屏幕，等等。

¥For this reason, it’s often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for sm screens, followed by md screens, etc.

针对断点范围

¥Targeting a breakpoint range

默认情况下，由 md:flex 等规则应用的样式将应用于该断点并在较大的断点处保持应用。

¥By default, styles applied by rules like md:flex will apply at that breakpoint and stay applied at larger breakpoints.

如果你只想在特定断点范围处于活动状态时应用工具，请将响应式修饰符（如 md）与 max-* 修饰符堆叠在一起，以将该样式限制在特定范围内：

¥If you’d like to apply a utility only when a specific breakpoint range is active, stack a responsive modifier like md with a max-* modifier to limit that style to a specific range:

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

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

¥Tailwind generates a corresponding max-* modifier for each breakpoint, so out of the box the following modifiers are available:

修饰符	媒体查询
`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) { ... }`

针对单个断点

¥Targeting a single breakpoint

要以单个断点为目标，通过将像 md 这样的响应修饰符与下一个断点的 max-* 修饰符堆叠起来，以该断点的范围为目标：

¥To target a single breakpoint, target the range for that breakpoint by stacking a responsive modifier like md with the max-* modifier for the next breakpoint:

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

阅读有关针对断点范围的信息以了解更多信息。

¥Read about targeting breakpoint ranges to learn more.

使用自定义断点

¥Using custom breakpoints

自定义主题

¥Customizing your theme

你可以在 tailwind.config.js 文件中完全自定义断点：

¥You can completely customize your breakpoints in your tailwind.config.js file:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

在自定义断点文档中了解更多信息。

¥Learn more in the customizing breakpoints documentation.

任意值

¥Arbitrary values

如果你需要使用在你的主题中包含没有意义的一次性断点，请使用 min 或 max 修饰符使用任意值动态生成自定义断点。

¥If you need to use a one-off breakpoint that doesn’t make sense to include in your theme, use the min or max modifiers to generate a custom breakpoint on the fly using any arbitrary value.

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

在任意值文档中了解有关任意值支持的更多信息。

¥Learn more about arbitrary value support in the arbitrary values documentation.

目录