Tailwind CSS 响应式设计：从 breakpoint 到容器查询

做移动端适配不是"把桌面布局竖过来"——这是我在博客改版时最深的体会。这篇聊聊 Tailwind 响应式设计的方法论，以及和容器查询的组合使用。

移动优先：默认写手机，再逐级增强

Tailwind 的断点前缀都是 min-width 语义：

<!-- 默认（手机）：单列 -->
<div class="grid grid-cols-1">
<!-- ≥640px：两列 -->
<div class="grid grid-cols-1 sm:grid-cols-2">
<!-- ≥1024px：侧栏布局 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1fr_320px]">

写代码的顺序应该是：先写默认（移动端），再往上加断点。这样保证小屏体验优先，而不是大屏设计被压缩。

断点不是越多越好

默认断点 sm/md/lg/xl/2xl 够用，重点是每个断点解决一个明确的布局问题：

断点	典型用途
默认（<640px）	单列、堆叠、汉堡菜单
sm（≥640px）	卡片两列、导航展开
lg（≥1024px）	双栏侧栏、完整导航

一个经验：如果某个断点只改了个 padding，那它没有存在意义。

间距治理：别让移动端"松"

移动端最容易被吐槽的是"松散"——间距照搬桌面端，手机上就是大片空白。治理方案是间距也做响应式：

<!-- ❌ 桌面和手机一样的间距 -->
<div class="px-6 py-16">

<!-- ✅ 手机紧凑，桌面舒展 -->
<div class="px-4 py-8 sm:px-6 md:py-16">

关键变化：px-4、py-8 是移动端基础值，sm:/md: 才放大。

移动端信息重组：不是简单堆叠

真正的响应式要考虑信息优先级。以博客首页为例：

• 桌面端：左侧文章流 + 右侧作者卡片/热门（两栏）；
• 移动端：不能把右侧内容原样塞到下面，而是重新编排——作者卡压缩成条状、热门折叠成手风琴、精选卡片横向滑动。

<!-- 移动端：精选横滑卡片 -->
<div class="feat-grid">
  <!-- flex + overflow-x-auto + scroll-snap -->
</div>

<!-- 桌面端：同一组件变网格 -->
@media (min-width: 640px) {
  .feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

容器查询：让组件自己适应

Tailwind v4 支持容器查询，组件不再依赖"视口"而是"容器宽度"：

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2">
    <!-- 当容器 ≥28rem 时变两列 -->
  </div>
</div>

容器查询适合侧栏里的组件——同一个组件放在窄侧栏和宽主区，应该展示不同密度，而不是等视口变化。

实战清单

1. 默认写移动端，sm/md/lg 逐级增强；
2. 间距、字号也响应式，移动端收紧；
3. 信息重排 > 简单堆叠（折叠、压缩、横滑）；
4. 侧栏组件用容器查询，主布局用视口断点；
5. 每个断点必须有明确理由，否则删掉。

小结

响应式设计的三层境界：

1. 能用——断点堆叠，不溢出；
2. 好用——移动端信息重排，间距收紧；
3. 优雅——组件按容器自适应，布局语义化。

Tailwind 只是工具，真正的功夫在**"为每个屏幕重新思考信息架构"**。