# 响应式之智——一页适配万物 ## 概述 同一个页面在手机上竖着看，在桌面上横着看——布局必须跟着变。 Tailwind 采用 **mobile-first（移动优先）** 的策略：先写手机上的样式，再用断点覆盖更大屏幕的布局。 这意味着不加前缀的样式默认在所有屏幕上都生效。加上 `md:` 或 `lg:` 前缀后，只在达到相应宽度的屏幕上生效。 ## 断点系统 ### 默认断点 | 前缀 | 最小宽度 | 适用 | |------|----------|------| | `sm` | 640px | 大屏手机横屏、小平板 | | `md` | 768px | 平板 | | `lg` | 1024px | 小桌面、笔记本 | | `xl` | 1280px | 桌面显示器 | | `2xl` | 1536px | 大屏幕 | ![](images/08-breakpoints.svg) ### 使用方法 ```html
侧边栏
主内容
卡片 1
卡片 2
卡片 3

适配不同屏幕的标题

``` ### 工作原理 `sm:` 等价于 `@media (width >= 40rem)`，`md:` 等价于 `@media (width >= 48rem)`，以此类推。 不加前缀的样式，对**所有**屏幕生效。加了前缀的样式，只在**该宽度及以上**生效。 ```html
``` ### 最大宽度变体 v4 自动生成了对应的 `max-*` 变体，表示"小于某个断点"： ```html
手机上隐藏
平板专属内容
``` ## 常见响应式模式 ### 1. 响应式网格 最常用的模式——卡片数量随屏幕变化： ```html
``` ### 2. 导航栏折叠 手机上导航链接折叠成汉堡菜单，桌面上展开： ```html ``` `hidden md:flex` 的意思是：默认隐藏（手机不显示），md 以上用 flex 显示。 ### 3. 侧边栏布局 手机上侧边栏隐藏或堆叠在上面，桌面端在左侧： ```html
主内容
``` ### 4. 响应式字号 手机上用小一点的标题，桌面上用大的： ```html

自适应标题

正文大小也根据屏幕变化

``` ## Container 布局 Tailwind 的 `.container` 类会根据屏幕宽度自动设置 `max-width`： ```html
内容最大宽度不超过 2xl 断点（1536px），并居中
``` > [!tip] 技巧 > 使用 `container mx-auto px-6` 作为页面内容包装器。`mx-auto` 居中，`px-6` 在手机上提供边距。 ## 容器查询（Container Queries） v4 新特性。**容器查询**和**响应式断点**不同：断点基于视口宽度，容器查询基于**父容器**的宽度。 这个功能非常实用——同一个组件放在侧边栏和主内容区时，可以自适应。 标记容器： ```html
``` 容器内的子元素： ```html
``` 容器查询的断点以 `@` 开头：`@sm`、`@md`、`@lg`、`@xl`、`@2xl`。 常用场景：卡片组件。不管卡片放在哪里（侧边栏还是主区域），只要容器够宽就自动切换横排/竖排布局。 ## 实战：让产品页全面响应 ```html 星光科技 · 智能灯

智能台灯 Lumina

光线随你而变。一盏懂你的台灯。

为什么选择 Lumina

🧠

AI 调光

内置传感器实时感知环境光线，自动调整亮度和色温。

👁️

护眼模式

无频闪、低蓝光，通过德国莱茵 TÜV 护眼认证。

🎤

语音控制

支持 Siri、小爱同学、Google Assistant 语音指令。

用户评价

用户

设计师小王

"用了两周，眼睛舒服多了。AI 调光真的很智能。"

用户

程序员大刘

"晚上写代码的时候，灯光会自动变暖，不刺眼。"

用户

学生小林

"期末复习全靠它了，灯光可以跟着时间变化。"

``` 这一版的响应式处理清单： | 元素 | 手机 | 平板 | 桌面 | |------|------|------|------| | 导航链接 | 隐藏 | 显示 | 显示 | | 汉堡按钮 | 显示 | 隐藏 | 隐藏 | | 卡片网格 | 1 列 | 2 列 | 3 列 | | Hero 标题 | text-3xl | text-4xl | text-5xl | | 按钮内边距 | px-6 py-3 | px-8 py-4 | px-8 py-4 | | 圆角 | rounded-2xl | rounded-3xl | rounded-3xl | | 页脚方向 | 纵向堆叠 | 横向排列 | 横向排列 | | 截图内部间距 | p-8 | p-16 | p-16 | > [!summary] 本章小结 > - Tailwind 是 mobile-first：不加前缀的样式对所有屏幕生效 > - `sm:` / `md:` / `lg:` / `xl:` / `2xl:` 是断点前缀 > - v4 也支持 `max-*` 变体表示"小于某断点" > - 容器查询 `@container` + `@md:*` 让组件自适应父容器宽度 > - 响应式设计的关键：**先写好手机版，再逐步叠加更大屏幕的样式** --- 页面在各种屏幕上都很漂亮了。但只支持浅色背景——下一次我们加入**深色主题**。 --- > 作者: Aphros > URL: https://blog.papergate.top/posts/08.%E5%93%8D%E5%BA%94%E5%BC%8F%E4%B9%8B%E6%99%BA%E4%B8%80%E9%A1%B5%E9%80%82%E9%85%8D%E4%B8%87%E7%89%A9/