@media (width >= 768px) and (width <= 1023px) 无效，因 width 媒体特性仅支持精确匹配（如 width: 768px），不支持比较运算符；正确写法是 @media screen and (min-width: 768px) and (max-width: 1023px)，且须配合 viewport meta 标签。
media 查询的 width 范围语法怎么写才有效
旧写法 @media (min-width: 768px) and (max-width: 1023px) 没错，但冗余、易错、难维护。现代浏览器（Chrome 111+、Firefox 119+、Safari 16.4+）已支持范围语法，直接用 width >= 768px and width 更直观。
关键点：范围语法只接受「属性名 + 比较符 + 值」，不支持 and 连接多个独立条件；比较符必须是 >=、<=、>、< 或 ==（注意是双等号，不是单等号）。
-
width >= 768px✅ 有效 -
(min-width: 768px)✅ 兼容写法，但非范围语法 -
width >= 768px and height <= 800px❌ 无效 —— 范围语法不支持跨属性and -
width = 768px❌ 错误符号，必须用==
如何安全降级兼容不支持范围语法的浏览器
不能只靠 @supports 检测，因为媒体查询范围语法本身不在 @supports 的检测范围内（CSSWG 明确不支持）。实际可行的降级策略只有两种：
- 双写法并存：先写范围语法，紧接着用传统语法覆盖（利用层叠优先级，后者生效）
- 用构建工具（如 PostCSS）自动将范围语法转译为传统写法（推荐
postcss-media-minmax插件）
示例双写法：
立即学习“前端免费学习笔记（深入）”；
@media (width >= 768px) and (width <= 1023px) {
.sidebar { display: block; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.sidebar { display: block; }
}
注意：两个规则完全相同，旧浏览器忽略第一行，执行第二行；新浏览器按顺序解析，第二行会覆盖第一行（除非加 !important，但不建议）。
aspect-ratio 和 hover 也支持范围语法吗
支持，但行为不同：
-
aspect-ratio可直接用aspect-ratio >= 1/1或aspect-ratio == 4/3—— 这比写min-aspect-ratio: 1/1更精确，避免把正方形设备误判为横屏 -
hover不支持范围比较，只能用hover: hover或hover: none；写hover >= hover会直接失效 -
prefers-color-scheme同样不支持范围，它是离散值，不是数值型媒体特性
判断依据很简单：只有 CSS 媒体特性规范中标注为「<number>」或「<ratio>」类型的，才支持范围语法；布尔型或关键字型（如 prefers-reduced-motion）不支持。
为什么 @media (width >= 768px) { ... } 有时不触发
最常见原因是 viewport 设置或设备缩放干扰了计算值。比如在 iOS Safari 中，即使视觉宽度是 800px，width 媒体特性返回的可能是设备独立像素（DIP）值，受 viewport 的 initial-scale 影响。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且未被 JS 动态修改 - 避免用
width判断响应式断点，优先用min-width传统语法或container查询（更可靠） - 调试时可在控制台运行
window.matchMedia('(width >= 768px)').matches实时验证
范围语法本身很干净，但它的可靠性高度依赖运行环境的一致性 —— 这一点容易被忽略。
