媒体查询

Media Query

样式与 CSS也叫：@media、Media Queries、媒体查询语句

一句话：CSS 里按条件生效的样式规则，比如屏幕宽度小于 768px、系统开启深色模式时才应用某些样式。

详细解释

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

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

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

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

请用媒体查询处理这几件事：屏幕宽度小于 768px 时隐藏右侧推荐栏，正文占满宽度；系统开启深色模式时切换到深色配色；用户开启「减少动态效果」时关闭所有过渡动画；打印时隐藏导航栏和按钮。