css自定义属性不能用于@media查询，因其解析时机早于变量计算，导致语法错误且静默失效；正确做法是用js读取变量配合matchmedia或css-in-js动态生成查询。
CSS 自定义属性不能直接用在 @media 查询里——这是最常踩的坑，改了变量却没生效，纯属白忙。
为什么 var(--breakpoint-md) 在 @media 里会失效
CSS 媒体查询解析发生在样式计算之前，而自定义属性是运行时继承和计算的，两者生命周期不重叠。浏览器读到 @media (min-width: var(--breakpoint-md)) 时，直接报语法错误，整条规则被丢弃。
- DevTools 控制台会静默忽略，不报错也不警告，只在“Computed”里看不到对应样式
- 哪怕你在
:root里定义了--breakpoint-md: 768px，@media依然不认识它 - 这个限制是 CSS 规范级的，所有浏览器都一致，不是 Bug 也不是兼容性问题
真正能用自定义属性管理断点的场景
自定义属性适合做「断点值的集中声明 + JS 读取同步」，而不是替代媒体查询本身。
- 在
:root里统一存断点数值：--breakpoint-sm: 640px、--breakpoint-md: 768px - JS 可通过
getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md')拿到值，用于 resize 监听或动态 class 切换 - 配合
matchMedia()手动监听：window.matchMedia('(min-width: ' + sm + ')').matches - 如果项目用了 CSS-in-JS（如 Emotion），可在 JS 层拼接字符串生成媒体查询，此时变量才真正起作用
Tailwind 用户别在这儿绕弯子
Tailwind 的断点完全由 tailwind.config.js 中的 theme.screens 决定，构建时静态生成 CSS。你写 md:text-lg，它就硬编码成 @media (min-width: 768px) —— 和 CSS 变量无关。
- 想改断点，必须改配置文件，重启构建；改
:root变量毫无影响 - 不要试图用
@layer base里覆盖@media，Tailwind 不认你后写的规则 - 如果真要 JS 控制响应式行为（比如根据用户偏好切换布局），用
data-属性 + 类名切换更可靠
断点管理真正的复杂点不在怎么写，而在「什么时候该用变量、什么时候该用预处理器、什么时候干脆手写像素值」——变量适合 JS 同步和主题切换，但媒体查询本身永远得是静态值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
