Tailwind-响应式设计

Tailwind 中的每个实用程序类都可以在不同的断点有条件地应用，这使得构建复杂的响应式界面变得轻而易举，而…

概述

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

首先，请确保您已将视口 meta 标签添加到文档的 <head> 中

index.html

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

然后，要添加一个实用程序，但只希望它在特定断点生效，您只需在实用程序前缀加上断点名称，后跟 : 字符

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

默认情况下有五个断点，灵感来自常见的设备分辨率

断点前缀最小宽度CSS
sm40rem (640px)@media (width >= 40rem) { ... }
md48rem (768px)@media (width >= 48rem) { ... }
lg64rem (1024px)@media (width >= 64rem) { ... }
xl80rem (1280px)@media (width >= 80rem) { ... }
2xl96rem (1536px)@media (width >= 96rem) { ... }

这适用于框架中的每个实用程序类，这意味着您可以在给定的断点更改几乎任何内容——甚至包括字母间距或光标样式等内容。

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

html
<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md 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="text-sm font-semibold tracking-wide text-indigo-500 uppercase">Company retreats</div>
      <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline">
        Incredible accommodation for your team
      </a>
      <p class="mt-2 text-gray-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 确保图像为全高。

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

移动优先工作方式

Tailwind 使用移动优先的断点系统，类似于您在 Bootstrap 等其他框架中可能习惯的系统。

这意味着未加前缀的实用程序（如 uppercase）在所有屏幕尺寸上都生效，而带前缀的实用程序（如 md:uppercase）仅在指定的断点及以上生效。

定位移动屏幕

这种方法最常让人感到惊讶的地方是，要为移动设备设置样式，您需要使用实用程序的未加前缀版本，而不是 sm: 前缀版本。不要将 sm: 视为表示“在小屏幕上”，而应将其视为“在小断点处”。

不要使用 sm: 来定位移动设备

html
<!-- 这只会将文本固定在屏幕宽度为 640 像素及以上的区域，而不适用于小屏幕。 -->
<div class="sm:text-center"></div>

使用未加前缀的实用程序来定位移动设备，并在更大的断点处覆盖它们

html
<div class="text-center sm:text-left"></div>

因此，通常最好先实现设计的移动布局，然后再叠加任何对 sm 屏幕有意义的更改，然后是 md 屏幕，依此类推。

定位断点范围

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

如果您希望仅在特定断点范围处于活动状态时才应用实用程序，请将响应式变体（如 md）与 max-* 变体堆叠以将该样式限制为特定范围

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

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

变体媒体查询
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) { ... }

定位单个断点

要定位单个断点，请通过堆叠响应式变体（如 md）与下一个断点的 max-* 变体来定位该断点的范围

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

阅读有关定位断点范围以了解更多信息。

使用自定义断点

自定义您的主题

使用 --breakpoint-* 主题变量自定义您的断点

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

请注意，为断点定义始终使用相同的单位非常重要，否则生成的实用程序可能会以意外的顺序排序，从而导致断点类以意外的方式相互覆盖。

Tailwind 对默认断点使用 rem，因此，如果您要向默认值添加其他断点，请确保也使用 rem。

在主题文档中了解有关自定义主题的更多信息。

删除默认断点

要删除默认断点，请将其值重置为 initial 关键字

css
@import "tailwindcss";

@theme {
  --breakpoint-2xl: initial;
}

您还可以使用 --breakpoint-*: initial 重置所有默认断点，然后从头开始定义所有断点

css
@import "tailwindcss";

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

在主题文档中了解有关删除默认主题值的更多信息。

使用任意值

如果您需要使用不适合包含在主题中的一次性断点，请使用 min 或 max 变体来动态生成自定义断点，使用任何任意值。

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

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

容器查询

什么是容器查询？

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

你贴的代码：

css
.@container {
    container-type: inline-size;
}

作用是：把类名为 @container 的元素声明为一个“容器”（container）， 并指定它的 容器类型（container-type） 为 inline-size， 这样它的子元素就可以用 @container 规则来根据容器大小（而不是视口大小）来做响应式布局。

逐条解释

  1. container-type: inline-size

    • inline-size 表示只关心容器的行内尺寸（水平方向的宽度）。

    • 启用后，你可以在子元素里写：

      @container (min-width: 400px) {
    .child {
        background: red;
    }
}

      当这个父容器的宽度 ≥ 400px 时，.child 的背景才会变红。

  2. container的意义

    • 传统响应式布局只能用 @media (min-width: ...)，是基于整个视口宽度判断。
    • @container 可以让你根据某个特定容器的大小去调整子元素的样式， 这让组件可以更独立、更模块化，特别适合组件化开发（Vue、React里很常用）。

举个简单示例

css
<template>
  <div class="container">
    <div class="box">Box</div>
  </div>
</template>

<style scoped>
.container {
  /* 声明这是一个容器，并取名 myContainer */
  container-type: inline-size;
  container-name: myContainer;

  width: 100%;
  border: 1px solid gray;
}

@container myContainer (max-width: 300px) {
  .box {
    background: lightcoral;
  }
}
</style>

当 . @container 的宽度 ≤ 300px，.box 就会变成红色。

完全可以不设置 container-name，这就是 匿名容器（Unnamed Container） 的用法。 这样写会直接使用最近的祖先容器来做匹配，语法更简单。

css
<template>
  <div class="container">
    <div class="box">Box</div>
  </div>
</template>

<style scoped>
.container {
  /* 不需要 container-name */
  container-type: inline-size;
  width: 100%;
  border: 1px solid gray;
}

/* 直接写 @container (条件) 即可，匹配最近的容器 */
@container (max-width: 300px) {
  .box {
    background: lightcoral;
  }
}
</style>

基本示例

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

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

与断点变体一样，容器查询在 Tailwind CSS 中是移动优先的，并在目标容器大小及以上应用。

最大宽度容器查询

使用 @max-sm 和 @max-md 等变体在特定容器大小以下应用样式

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

容器查询范围

将常规容器查询变体与最大宽度容器查询变体堆叠以定位特定范围

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

命名容器

对于使用多个嵌套容器的复杂设计，您可以使用 @container/{name} 命名容器，并使用 @sm/{name} 和 @md/{name} 等变体定位特定容器

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

这使得可以根据远处容器的大小而不是仅根据最近的容器的大小来设置样式。

使用自定义容器尺寸

使用 --container-* 主题变量自定义您的容器尺寸

css
@import "tailwindcss";

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

这会添加一个新的 8xl 容器查询变体，该变体可以在您的标记中使用

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

在主题文档中了解有关自定义主题的更多信息。

使用任意值

对于您不想添加到主题中的一次性容器查询尺寸，请使用 @min-[475px] 和 @max-[960px] 等变体

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

使用容器查询单位

在其他实用程序类中，使用 容器查询长度单位（如 cqw）作为任意值来引用容器大小

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

容器尺寸参考

默认情况下，Tailwind 包括从 16rem (256px) 到 80rem (1280px) 的容器尺寸

变体最小宽度CSS
@3xs16rem (256px)@container (width >= 16rem) { … }
@2xs18rem (288px)@container (width >= 18rem) { … }
@xs20rem (320px)@container (width >= 20rem) { … }
@sm24rem (384px)@container (width >= 24rem) { … }
@md28rem (448px)@container (width >= 28rem) { … }
@lg32rem (512px)@container (width >= 32rem) { … }
@xl36rem (576px)@container (width >= 36rem) { … }
@2xl42rem (672px)@container (width >= 42rem) { … }
@3xl48rem (768px)@container (width >= 48rem) { … }
@4xl56rem (896px)@container (width >= 56rem) { … }
@5xl64rem (1024px)@container (width >= 64rem) { … }
@6xl72rem (1152px)@container (width >= 72rem) { … }
@7xl80rem (1280px)@container (width >= 80rem) { … }

评论

评论加载中……