媒体查询

媒体查询是写在 CSS 里的「如果……就……」。最常见的是按屏幕宽度判断：@media (max-width: 768px) { ... } 表示宽度不超过 768px 时，大括号里的样式才生效。移动优先的写法用 min-width，从小屏往大屏逐步加样式。

它不只能判断宽度，还能判断：系统是否开启深色模式 prefers-color-scheme: dark、用户是否要求减少动画 prefers-reduced-motion、设备是否支持鼠标悬停 hover: hover、是否在打印 print。

和相关词的关系：响应式是目标，媒体查询是实现工具，断点是媒体查询里写的宽度数值。用 Tailwind 时一般不用手写，md:、dark: 这些前缀背后就是媒体查询。