跳转到内容
mCourse

响应式设计

你将学会什么

Section titled “你将学会什么”
  • 用 sm:、md:、lg: 断点前缀控制响应式样式
  • 按「先小屏后大屏」的顺序组织类名
  • 在网格布局中逐级增加列数，而不是重写整块样式

正文

Section titled “正文”

真正适合学生项目的响应式写法，其实不需要写很多媒体查询。Tailwind 已经帮你封装好了常用断点，你只需要在类名前面加前缀：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="border rounded-lg p-4">卡片 A</div>
  <div class="border rounded-lg p-4">卡片 B</div>
  <div class="border rounded-lg p-4">卡片 C</div>
</div>

这种写法的核心不是“我写了媒体查询”，而是“我先按最小屏幕写一列，再在更大屏幕上增加列数”。默认的 grid-cols-1 保证小屏一行一列，md:grid-cols-2 在中屏变成两列，lg:grid-cols-3 在大屏变成三列。这种思路在课程作业、作品集、课程小组项目中都能直接复用，而且不用离开 HTML 就能预览效果。

动手练

Section titled “动手练”

知识检查

Section titled “知识检查”

先自己回答，再看答案：

  1. md:grid-cols-2 表示什么含义？
  2. 为什么默认值要写 grid-cols-1 而不是直接写 md:？
  3. 断点前缀写法相比手写媒体查询的优势是什么？
参考答案
  1. 在 md 及以上断点，网格每行显示两列。
  2. 保证最小屏幕（移动端）始终是单列，再逐级增强，避免小屏布局被破坏。
  3. 不用离开 HTML、不用维护成块的媒体查询代码，断点逻辑直接写在类名里。

本节小结

Section titled “本节小结”
  • 响应式前缀：sm:、md:、lg:，按屏幕从小到大递进
  • 移动优先：先写最小屏幕的默认值，再逐级增加列数
  • 网格布局只改 grid-cols-* 前缀即可完成响应式，无需 @media
响应式设计小测
x
1 / 3

Tailwind 的响应式前缀是？