var(--breakpoint-md)可在@media中使用，但仅Safari 15.4+、Chrome 100+、Firefox 99+稳定支持；旧版浏览器静默忽略整条规则，需自行兜底。
直接说结论：var(--breakpoint-md) 能用在 @media 里，但只在 Safari 15.4+、Chrome 100+、Firefox 99+ 稳定生效；旧版浏览器会静默忽略整条规则，不报错也不 fallback。别指望它“自动兼容”，得自己兜底。
为什么 @media (min-width: var(--breakpoint-md)) 在 Safari 15.3 及更早版本不工作
这不是 bug，是规范实现滞后。Safari 直到 15.4 才正式支持 CSS 变量在媒体查询中的解析，之前版本遇到 var() 就跳过该 @media 块，连警告都不给。你写的规则等于没写。
- 检查方式：打开 Safari 开发者工具 → 控制台执行
matchMedia('(min-width: var(--x))').matches，返回false或报错即不支持 - Can I Use 显示支持起始版本非常关键，不能凭“Safari 支持 CSS 变量”就推断媒体查询也支持
- PostCSS 插件（如
postcss-custom-properties）若开启静态替换，会把var(--bp-md)编译成固定像素值，失去响应式意义——这等于放弃变量价值
--breakpoint-sm 该用 px 还是 rem
必须用 rem（如 --breakpoint-sm: 30rem），禁用 px。原因不是“好看”，而是行为差异：
-
px是绝对单位，viewport 缩放或高 DPR 设备下，实际触发断点的物理宽度会漂移（比如缩放 125%，768px 断点可能提前在 614px 视口就命中） -
rem绑定根字体大小，默认 1rem = 16px，缩放时 rem 值同比例缩放，断点逻辑与用户感知一致 - 移动端优先项目中，
30rem≈ 480px，比硬写480px更可靠 - 别在
calc()里混用：例如calc(var(--breakpoint-md) + 1px)大部分浏览器不支持，会直接失效
如何安全地在 JS 中读取当前生效的断点值
JS 读不到“变量定义”，只能读到浏览器当前计算出的最终值。而且这个值是静态快照，不随 resize 自动更新：
立即学习“前端免费学习笔记（深入）”；
- 正确读法：
getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md')，返回字符串如"48rem" - 错误做法：试图用
document.documentElement.style.getPropertyValue('--breakpoint-md')—— 这只读内联样式，而断点变量都在:root的 CSS 规则里 - 别拿这个值做逻辑分支（如
if (bp > 768) { ... }），因为单位要手动解析，且无法反映媒体查询是否真正匹配 - 真要响应变化，监听
window.matchMedia的change事件，而不是轮询变量值
断点变量该不该和颜色/间距变量放一起
不该。它们属于不同抽象层级，混在一起会误导维护者：
- 断点是布局决策阈值（“内容何时换行”“导航何时折叠”），演化节奏由产品交互决定
- 颜色、字号、间距是视觉度量单位，由设计系统统一管理，修改频率和依据完全不同
- 命名必须隔离：用
--breakpoint-nav-collapse，而非--spacing-md；在:root里用注释块分隔，例如/* breakpoints */和/* colors */ - 如果用 CSS-in-JS（如 Emotion），断点值应从 JS 对象传入，而不是靠
getComputedStyle反向提取——前者可控，后者不可靠
最易被忽略的一点：CSS 变量在媒体查询中是静态求值的，它不会响应 @media (prefers-color-scheme: dark) 或 @media (hover: hover) 这类环境变化。想让暗色模式切换断点，得用 JS 切换 class 或写两套独立变量 + 嵌套媒体查询，没有捷径。
