合理设置媒体查询断点应以内容驱动为主，参考768px、1024px、1200px等主流视口宽度，优先使用min-width实现移动优先，统一定义断点变量，避免混用max-width，并确保语法正确、viewport标签完备及特性兼容性。
媒体查询的断点怎么设才合理
响应式不是靠猜，断点得从真实设备数据出发。主流做法是参考浏览器市场份额里常见的视口宽度，比如 768px（平板竖屏）、1024px（平板横屏）、1200px（桌面窄屏）。但更稳妥的方式是「内容驱动」——等你的布局真正撑不开、文字换行异常、卡片错位时，再加断点，而不是硬套设备型号。
- 不要为 iPhone 12 单独写
@media (width: 390px)，它和多数 375–414px 设备可共用一套规则 - 移动端优先，先写默认样式（小屏），再用
min-width逐步增强，避免重复覆盖 - 断点值统一定义在 CSS 变量或预处理器变量里，比如
--bp-tablet: 768px，方便维护
max-width 和 min-width 哪个更安全
用 min-width 更可控。它符合「移动优先」逻辑：基础样式适用于所有尺寸，大屏才追加规则。而 max-width 容易导致样式层叠混乱，尤其多人协作时，后面写的 @media (max-width: 767px) 可能被前面同级规则意外覆盖。
-
@media (min-width: 768px)：768px 及以上生效，推荐 -
@media (max-width: 767px)：只在 767px 及以下生效，调试时容易漏掉边界值（比如 767.5px） - 混用两者会引入歧义，例如
@media (min-width: 768px) and (max-width: 1023px)看似精确，实则增加维护成本，多数场景单用min-width就够
为什么写了媒体查询却没生效
最常见原因是 CSS 优先级或语法错误：
- 忘记在
@media内部写选择器，比如只写@media (min-width: 768px) { color: red; }是无效的，必须包在规则块里：@media (min-width: 768px) { body { color: red; } } - 媒体查询写在了
@import之后，而 CSS 规范要求@import必须在文件最前，否则整个 @media 块会被忽略 - 使用了不支持的特性，比如在旧版 Safari 中用
hover媒体特性，或误写成@media screen and (min-device-width: 768px)（device-width不反映缩放后视口，应改用width） - HTML 缺少 viewport meta 标签，导致移动端根本不会按 CSS 像素解析，媒体查询形同虚设：
<meta name="viewport" content="width=device-width, initial-scale=1">
除了 width，还有哪些媒体特性值得用
width 和 height 是基础，但实际项目中这几个更实用：
