断点

TailwindCSS

1 基本知识

在类名前面加上以下前缀，代表该类在大于该断点的屏幕尺寸上生效。比如：

<img class="w-16 md:w-32 lg:w-48" src="...">

代表：

  • 在 [0~md) 屏幕宽度下，width=16
  • 在 [md~lg) 屏幕宽度下，width=32
  • 在 [lg~+inf) 屏幕宽度下，width=48

一共有五个断点，定义如下：

前缀 定义 默认情况下的像素尺寸 背后的媒体查询样式
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) { ... }

最佳实践：

  1. 先按移动设备的尺寸(假定屏幕宽度小于640像素)写一套不带断点前缀的样式，这是兜底样式
  2. 然后按需要再加一套sm:前缀样式，或md:前缀样式去写更大的屏幕

2. 反向断点

默认的前缀匹配的是从当前断点到更大的屏幕宽度，比如sm:w-32指的是[sm, +inf)的范围，如果你想要的是(-inf, sm]的范围的话，tailwind也提供了以下的前缀

前缀 背后的媒体查询样式
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-lg:flex 仅应用在屏幕宽度在[48rem, 64rem)范围里时
sm:max-md:flex 仅应用在屏幕宽度在[40rem, 48rem)范围里时

3. 自定义临时断点：

  • max-[???] 代表 (-inf, ???)
  • min-[???] 代表 [???, +inf)

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

4. 如何定义自己的断点体系

在tailwind的配置中如下写：

@import "tailwindcss"

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-md: initial;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

上面的配置做了三件事：

  1. 新增了两个断点xs与3xl
  2. 同时修改了2xl的定义
  3. 删除了默认断点md的定义：自此之后md:就没卵用了

有一种实践是如下这样做的：

@import "tailwindcss"

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

做了两件事：

  1. 删除了所有原生断点
  2. 定义了三个断点：tablet, laptop和desktop

5. 容器断点

上面说的所有断点，都是在看“屏幕尺寸”，我们把这种断点叫“视口断点”。

tailwind还支持一种特殊的断点，它看的不是“屏幕尺寸”，而是父元素的尺寸，这种断点叫“容器断点”。

比如下面的例子：

<div class="@container w-[50%]">
  <div class="w-12 h-12 bg-red-500 @sm:bg-blue-500">
    <!-- ... -->
  </div>
</div>
  • 外层 div 通过@container这个类名，将自己定义成了一个容器
  • 内层 div 通过@sm:这个前缀，来使用容器里的断点体系

即@sm:看的不是“屏幕尺寸”，而是祖宗元素中，离自己最近的那个带@container的祖宗的尺寸

这个特性在开发可利用的组件时特别有用。与视口断点体系不同，tailwind默认为容器断点定义了很多默认断点尺寸，如下：

断点 尺寸定义 背后生成的container查询
@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) { … }

容器断点体系的其它知识点与视口断点是一样的：

  • 也支持反向断点
  • 也支持自定义临时断点
  • 也支持改写默认断点定义

如果要改写默认容器断点的定义，与视口断点差不多，只不过把breakpoint改成container即可：

@import "tailwindcss"

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