响应式设计 - 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> 中添加了 viewport 元标签：

🌐 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。
当父元素是一个弹性容器时，我们希望确保图片永远不会缩小，因此我们添加了 md:shrink-0 来防止在中等屏幕及更大屏幕上缩小。从技术上讲，我们本可以只使用 shrink-0，因为它在小屏幕上不会有任何效果，但由于它只在 md 屏幕上才重要，因此在类名中明确这一点是一个好主意。
在小屏幕上，图片默认会自动占满整个宽度。在中等屏幕及以上，我们将宽度限制为固定大小，并使用 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>

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

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

目录