tailwindcss学习笔记之Responsive design

所属分类：HtmlCssJs | 浏览：185 | 发布于 2025-11-20

使用响应式工具类来创建自适应用户界面。每一个tailwindcss的工具类都能应用在不同的断点，这样就能构建复杂的响应式页面甚至不用写HTML。

1、概览

要实现响应式布局，先要在 `<head>` 标签中添加 viewport meta tag：

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

要让工具类只应用在特定的断点，你需要在工具类前面添加断点名称，然后紧跟 `:`字符

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

上面的代码表示默认宽度是16，在中等屏幕宽度是32，在大屏幕宽度是48。

Tailwindcss默认断点列表

Breakpoint prefix	Minimum width	CSS
`sm`	40rem(640px)	`@media (width <=40rem) { ... }`
`md`	48rem(768px)	`@media (width <=48rem) { ... }`
`lg`	64rem(1024px)	`@media (width <=64rem) { ... }`
`xl`	80rem(1280px)	`@media (width <=80rem) { ... }`
`2xl`	96rem(1536px)	`@media (width <=96rem) { ... }`

经过换算得知：tailwindcss默认 1rem = 16px。

2、移动优先

tailwindcss是一个采用移动优先的断点策略。经过理解得出结论：这里有一个比sm还小的隐藏屏幕，默认的tailwindcss是先考虑这个比sm还小的隐藏屏幕。

2.1、Targeting mobile screens 目标移动屏幕

2.1.1、不要对mobile设备使用 `sm:`

<!-- This will only center text on screens 640px and wider, not on small screens -->
<!-- 这种用法是错误的，不推荐 -->
<div class="sm:text-center"></div>

2.1.2、使用无前缀的工具类来定位mobile设备，并在较大的断点处覆盖他们

<!-- 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屏幕等。

2.2、targeting a breakpoint range 目标是一个断点范围

默认，样式应用比如 `md:flex` 会应用在md断点，并应用在比md更大的断点上。

如果你想工具类只在特定断点范围是活动状态时应用时，可以将响应变量比如 md 和 max-* 变量叠加，以将该样式限制在特定范围内：

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

Tailwindcss为每个断点生成了对应的 `max-*` 变量，你可以在下面的表格中找到对应的关系：

Variant	Media query
`max-sm`	`@media (width < 40rem) { ... }`
`max-md`	`@media (width < 48rem) { ... }`
`max-lg`	`@media (width < 64rem) { ... }`
`max-xl`	`@media (width < 80rem) { ... }`
`max-2xl`	`@media (width < 96rem) { ... }`

结论：使用 `breakpoint:max-*`的格式来确定一个范围，其中breakpoint确定最小范围，max-*确定最大范围。

2.3、Targeting a single breakpoint 目标是单一断点

3、使用自定义断点

3.1、customizing your theme 自定义主题

使用 `--breakpoint-*` 主题变量来自定义你的断点：

@import "tailwindcss";
@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

上面的代码表示：针对`2xl`，使用 `100rem` 来代替默认 `96rem`; 并且创建了 `xs` 和 `3xl` 两个新的断点。然后就可以在html代码中使用它们：

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
  <!-- ... -->
</div>

注意：必须使用相同的单位来定义断点，否则生成的工具类有可能出现意外的排序，导致断点之间相互覆盖。Tailwindcss默认使用`rem`来定义断点。

3.2、Removing default breakpoints 移除默认的断点

3.2.1、要移除默认的断点，只需要将它的值重置为 `initial` 关键字即可：

@import "tailwindcss";
@theme {
  --breakpoint-2xl: initial;
}

3.2.2、你也可以使用 `--breakpoint-*: initial`重置所有的断点，然后从头开始定义自己的断点：

@import "tailwindcss";
@theme {
  --breakpoint-*: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;
}

3.3、Using arbitrary values 使用任意值

如果你需要使用一个一次性断点，而这个断点没有包含在你的主题中，那么你可以使用 min 或 max 变量来使用任何任意值来动态生成一个自定义断点：

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

4、Container queries 容器查询

什么是容器查询？

容器查询时一种现代的CSS特性，它允许你根据父元素的大小而不是整个视口的大小来设置样式。它允许你构建更便携和可重用的组件，因为它们可以根据该组件的实际可用空间进行更改。

4.1、基本示例

使用`@container`类来标记一个元素作为一个容器，然后使用`@sm`和`@md`等变体根据容器的大小设置子元素的样式：

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

就像breakpoint变体一样，container query 也是移动优先的，适用于目标容器大小及以上。

4.2、Max-width container queries 最大容器宽度查询

使用 `@max-sm`、 `@max-md` 这样的变体来应用低于特定容器大小的样式：

<div class="@container">
  <div class="flex flex-row @max-md:flex-col">
    <!-- ... -->
  </div>
</div>

4.3、Container query ranges 容器查询范围

将常规容器查询变量和 `max-width` 最大容器查询变量堆叠在一起，来实现特定范围查询：

<div class="@container">
  <div class="flex flex-row @sm:@max-md:flex-col">
    <!-- ... -->
  </div>
</div>

4.4、Named containers 命名容器

对于使用多个内嵌容器的复杂设计，可以使用 `@container/{name}`命名容器，然后使用类似 `@sm/{name}`、 `@md/{name}`这样的变体。

<div class="@container/main">
  <!-- ... -->
  <div class="flex flex-row @sm/main:flex-col">
    <!-- ... -->
  </div>
</div>

这样做可以让设置样式是基于较远的container，而不是只是最近的container。

4.5、Using custom container sizes 自定义 container 大小

使用 `--container-*` 主题变量来自定义 container 大小：

@import "tailwindcss";
@theme {
  --container-8xl: 96rem;
}

上面的代码新增了一个 `8xl` 容器查询变体，可以在代码中使用它：

<div class="@container">
  <div class="flex flex-col @8xl:flex-row">
    <!-- ... -->
  </div>
</div>

4.6、Using arbitrary values 使用任意值

使用变体像 `@min-[475px]` 和 `@max-[960px]` 这样的一次性容器查询，这样就不用添加到主题中：

<div class="@container">
  <div class="flex flex-col @min-[475px]:flex-row">
    <!-- ... -->
  </div>
</div>

4.7、Using container query units 使用容器查询单位

在工具类中使用像 `cqw` 这样的容器查询长度单位作为任意值，来引用容器大小：

<div class="@container">
  <div class="w-[50cqw]">
    <!-- ... -->
  </div>
</div>

4.8、Container size reference 容器查询大小列表

Tailwindcss 默认的容器大小范围时从 16rem(256px) 到 80rem(1280px)。

Variant	Minimum width	CSS
`@3xs`	16rem(256px)	`@container (width >= 16rem) { … }`
`@2xs`	18rem(288px)	`@container (width >= 18rem) { … }`
`@xs`	20rem(320px)	`@container (width >= 20rem) { … }`
`@sm`	24rem(384px)	`@container (width >= 24rem) { … }`
`@md`	28rem(448px)	`@container (width >= 28rem) { … }`
`@lg`	32rem(512px)	`@container (width >= 32rem) { … }`
`@xl`	36rem(576px)	`@container (width >= 36rem) { … }`
`@2xl`	42rem(672px)	`@container (width >= 42rem) { … }`
`@3xl`	48rem(768px)	`@container (width >= 48rem) { … }`
`@4xl`	56rem(896px)	`@container (width >= 56rem) { … }`
`@5xl`	64rem(1024px)	`@container (width >= 64rem) { … }`
`@6xl`	72rem(1152px)	`@container (width >= 72rem) { … }`
`@7xl`	80rem(1280px)	`@container (width >= 80rem) { … }`

本文链接： https://haitaobeta.com/a/bjBoVFVicGpyWFhTOTEwRXdVTXUvQT09.html