CSS3 不存在 Range Context 语法，@media 不支持 width >= 480px 等范围比较写法，仅支持 min-width/max-width；@container 的范围比较仅限容器查询且与媒体查询无关；推荐用自定义属性或 @custom-media 管理断点。
CSS3 的 Range Context（范围上下文）语法并不存在，目前所有主流浏览器都不支持该写法。你在网上看到的类似 @media (width >= 480px) 或 @container (inline-size > 300px) 这类“范围比较”写法，要么是误传，要么混淆了 CSS 容器查询（Container Queries）与媒体查询（Media Queries）的语法边界。
为什么 @media (min-width: 480px) 不能写成 @media (width >= 480px)
CSS 媒体查询规范（Media Queries Level 4）确实曾提案支持范围比较语法（如 width >= 480px），但截至 2024 年，所有浏览器均未实现该特性。当前唯一被广泛支持的仍是传统函数式语法：
-
@media (min-width: 480px)✅ 正确且兼容 -
@media (max-width: 767px)✅ 正确且兼容 -
@media (width >= 480px)❌ 无效，会被整个规则块忽略 @media (480px ❌ 语法错误，CSS 解析器直接丢弃
Chrome、Firefox、Safari 在解析到非法媒体特征时，会静默跳过整条 @media 规则——你不会看到报错，但样式也不会生效，极易误判为逻辑问题。
真正能简化断点编写的现代方案：容器查询 @container
如果你追求“基于范围”的响应式控制，容器查询才是目前唯一落地的、带范围语义的原生 CSS 方案，但它作用于元素尺寸而非视口，语法也受限：
立即学习“前端免费学习笔记（深入）”；
- 必须先给容器设置
container-type: inline-size（或size） - 只能用
@container (inline-size > 300px)这类比较语法 ✅（这是真实支持的） - 不支持
min-inline-size等传统前缀写法，只认括号内比较表达式 - 不支持复合条件如
(inline-size > 300px) and (inline-size —— 浏览器会解析失败
示例：
.card {
container-type: inline-size;
}
@container (inline-size > 400px) {
.card h2 { font-size: 1.5rem; }
}
@container (inline-size > 600px) {
.card { display: grid; }
}
注意：@container 的范围比较仅在容器查询中有效，它和媒体查询无关，也不能替代 @media。
想“简化断点编写”，实际更推荐这些做法
与其等待虚无的 Range Context，不如用已被验证的方式降低维护成本：
- 用 CSS 自定义属性统一管理断点值：
:root { --bp-sm: 480px; --bp-md: 768px; }，再在@media (min-width: var(--bp-md))中复用（注意：Safari 目前不支持var()在媒体查询中，需 PostCSS 插件如postcss-custom-media编译） - 用
@custom-media（PostCSS 插件）预定义语义化断点：@custom-media --sm (min-width: 480px);，然后写@media (--sm) - 避免嵌套多层
@media，优先用移动优先 +min-width单向扩展，减少条件分支
真正的“范围语法”短期内不会进入 @media，而容器查询的范围能力又受限于容器上下文——这意味着：**断点逻辑仍需靠人工拆解为多个单向条件，没有银弹。**
