不用 min-width 和 max-width 组合。CSS3 支持原生范围语法如 @media (width >= 768px) and (width

媒体查询范围语法到底要不要用 min-width 和 max-width 组合？

不用。CSS3 原生支持范围写法，比如 @media (width >= 768px) and (width ，但这个语法目前（截至 2024 年）<strong>仅 Chromium 111+ 支持</strong>，Firefox 和 Safari 完全不识别，直接忽略整条规则。所以现在写范围，还是得靠传统写法——但可以更干净。

怎么写出真正简洁又兼容的断点范围？

核心是利用“移动优先” + min-width 单向声明，避免 max-width 冗余叠加。比如要定义「平板横屏区间」（768px–1023px），别这么写：

@media (min-width: 768px) and (max-width: 1023px) { ... }

而应该拆成两层递进：

• 默认样式（手机）
• @media (min-width: 768px) → 启用平板竖屏及以上基础样式
• @media (min-width: 1024px) → 覆盖并升级为桌面样式

这样，768px–1023px 的样式就自然落在两个断点之间的“空隙”里，无需显式写 max-width。既减少代码量，又规避了多条件嵌套带来的维护混乱。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

立即学习“前端免费学习笔记（深入）”；

and 连接多个条件时容易漏掉哪些兼容细节？

当必须用 and（比如要同时限定宽度和 hover 能力），要注意三点：

• 所有条件必须用括号包裹，@media (min-width: 768px) and (hover: hover) ✅；@media min-width: 768px and hover: hover ❌（无效）
• hover: hover 在 iOS Safari 上始终返回 none，哪怕设备支持触控+鼠标，别依赖它做关键布局分支
• 像 (width >= 768px) 这类新语法一旦混入老写法中（如 @media (min-width: 768px) and (width >= 768px)），整个媒体查询会因语法错误被浏览器整体丢弃

为什么别急着用 width、height 等数值比较语法？

因为它们不是“渐进增强”，而是“全有或全无”。Chrome 支持了，Safari 用户看到的就是未生效的默认样式——而且没有任何降级提示或报错。更麻烦的是，这类语法不能和 rem、em 或视口单位混用，(width >= 48rem) 是非法的，必须写死像素值。真要动态响应，不如用 clamp() 配合单一断点，或者交由 JS 检测后加 class 控制。

实际项目里，最稳的“简洁”就是少写一行 max-width，而不是多写一个未来语法。