@custom-media 在所有主流浏览器中完全不被支持，从未进入标准且被CSS解析器静默忽略；替代方案包括PostCSS构建时转换、JS+matchMedia动态控制，或用自定义属性配合class驱动样式。
@custom-media 在当前所有主流浏览器中**完全不被支持**——它从未进入正式标准，也未被任何浏览器实现。你写下的 @custom-media 规则会被 CSS 解析器静默忽略，不会报错，也不会生效。
为什么你在 DevTools 里看不到效果
这不是配置错误或语法问题，而是根本性缺失：CSS WG 已将该提案（最初来自 Tab Atkins 的草案）搁置多年，后续被 @layer 和容器查询（@container）等更可行的机制分流。目前 Chromium、Firefox、Safari 均无计划支持 @custom-media。
- 尝试写
@custom-media --small-viewport (max-width: 480px);→ 浏览器直接跳过整条规则 - 在
@media (--small-viewport)中引用 → 解析失败，回退为无效媒体查询，样式不应用 - PostCSS 插件（如
postcss-custom-media）可模拟，但属于构建时转换，非原生运行时行为
真正可用的替代方案：CSS 自定义属性 + JavaScript 动态判断
若目标是“复用断点逻辑”，优先用维护成本低、兼容性好的组合：
- 把断点值提为 CSS 自定义属性：
:root { --bp-mobile: 480px; --bp-tablet: 768px; } - 媒体查询中仍需重复写
(max-width: var(--bp-mobile))（注意：CSS 不允许在@media内使用var()，此写法无效 —— 这正是@custom-media想解决却没落地的痛点） - 实际可行做法：用 JS 监听
matchMedia()，根据结果切换 class 或更新自定义属性，再用class驱动样式
PostCSS 是唯一接近“原意”的工程化解法
如果你坚持在源码中用别名写法并期望最终生成标准 CSS，必须引入构建步骤：
立即学习“前端免费学习笔记（深入）”；
- 安装
postcss和postcss-custom-media - 源码中写：
@custom-media --md (min-width: 768px) and (max-width: 1023px); - 然后在
@media (--md)中使用 → 构建后自动转为@media (min-width: 768px) and (max-width: 1023px) - ⚠️ 注意：生成的 CSS 体积会增大（每个别名展开一次），且无法动态响应运行时 viewport 变化
真正棘手的地方在于：你想复用的不只是数值，而是语义（比如 “窄屏折叠态”），而 CSS 原生至今没提供任何机制把媒体条件抽象成可引用的符号——这使得所有“别名”方案都绕不开构建时处理或 JS 补位。别名本身很干净，落地路径却不得不妥协。
