媒体查询基本语法
媒体查询（@media）让 CSS 只在满足条件时生效。min-width 表示“视口至少这么宽”，max-width 反之。它既能限宽度，也能限方向（orientation）、暗色模式（prefers-color-scheme）等。
写法建议：把同一组件的所有断点写在一起（从窄到宽），而不是散落各处，方便维护。
- @media (min-width: 768px)：视口 ≥ 768px 时生效
- @media (orientation: landscape)：横屏时生效
- @media (prefers-color-scheme: dark)：系统暗色模式时生效
CSS
/* 基本断点 */ .card { padding: 12px; } /* 默认（手机） */ @media (min-width: 768px) { .card { padding: 24px; border-radius: 12px; } /* 平板 */ } @media (min-width: 1200px) { .card { padding: 40px; box-shadow: 0 8px 30px rgba(0,0,0,.1); } /* 桌面 */ } /* 横屏 + 暗色模式组合 */ @media (orientation: landscape) and (prefers-color-scheme: dark) { .hero { color: #fff; background: #111; } }
本节要点媒体查询是断点切换布局的开关；条件可以从宽到深：宽高、方向、暗色模式、Reduced Motion。
