媒体查询
定义CSS 条件规则，按设备特性（宽度、方向、分辨率等）应用不同样式
媒体查询用 @media 包裹条件样式块，是响应式布局的开关。最常用的是视口宽度：@media (max-width: 768px) 表示「视口 ≤768px 时生效」，还可组合 min/max 形成区间，或用 and / ,（或）连接多条件。
除宽度外还可探测方向（orientation）、分辨率（min-resolution）、暗色偏好（prefers-color-scheme）、减少动画偏好（prefers-reduced-motion）——后两者是体验优化的利器。
- 移动优先：先写小屏基础样式，再用 min-width 逐级增强；
- 断点跟着内容走，别照搬设备尺寸表；
- 容器查询（@container）让组件按自身容器宽度响应，比媒体查询更组件化。
CSS
/* 移动优先 */ .grid { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (prefers-color-scheme: dark) { body { background: #0d1117; color: #e6edf3; } }
⚠ 常见误区
- 媒体查询不能重定义 CSS 变量以外的任何东西时先检查作用域
- 断点建议 3~4 个足够，过多说明信息架构有问题
- 打印样式 @media print 别忘，发票/文章打印很常见