CSS媒体查询的新范围语法有哪些应用场景？

在响应式前端开发中，CSS 媒体查询是实现多设备适配的主要手段。因为 CSS Level 4 的发布。新的范围语法让可以用更简洁、可读性更高的方式定义一段宽度区间，而不是为每个断点写单独规则。

至于使用者痛点，为什么新手和维护者总是被媒体查询折磨？

1️⃣ 语法复杂。容易出错 传统写法往往是：

@media screen and {
/* 大屏样式 */
}
@media screen and {
/* 小屏样式 */
}

如果想要覆盖一个宽度区间，需要组合多条规则并注意边界值，代码冗余且易漏。

2️⃣ 浏览器兼容性差 是在 IE8+ 或旧版 Safari 上。一些逻辑运算符（如 not,only) 的支持不一致；自定义媒体类型在老浏览器中会被忽略。

3️⃣ 可维护性低 项目成长后常见断点会不断增多，维护者不得不在多个地方同步修改同一宽度阈值。任何一个错误都可能导致布局混乱。