CSS自定义属性可统一管理断点值，提升可维护性；须在:root中声明带单位的变量，媒体查询中直接引用var()，但不可用于calc()或局部作用域。
用 --breakpoint-sm 这类自定义属性代替硬编码像素值
媒体查询里反复写 480px、768px 不仅难维护，还容易拼错或漏改。CSS 自定义属性（即 CSS 变量）本身不直接参与媒体查询条件判断，但能统一管理断点数值，让修改只需改一处。
把断点声明在 :root 里是最常见做法：
:root {
--breakpoint-xs: 320px;
--breakpoint-sm: 480px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
}
后续所有 @media 都可引用这些变量，比如：
@media (min-width: var(--breakpoint-md)) {
.container { max-width: 720px; }
}
注意：变量必须是纯数值（带单位），不能写成 --breakpoint-md: 768 然后在媒体查询里补 px —— 这样会失效。
为什么不能在 @media 条件中用 var() 做计算？
CSS 规范明确禁止在媒体查询条件里使用 var()，浏览器会直接忽略整个规则。例如下面这段无效：
@media (min-width: calc(var(--breakpoint-md) + 1px)) { ... }
常见错误现象：样式没生效，开发者工具里该媒体查询被标为“invalid”或干脆不显示。
如果真需要动态计算断点，只能靠预处理器（如 Sass 的 $md + 1px）或构建时的 CSS-in-JS 工具。纯 CSS 场景下，老老实实多定义一个变量，比如：
--breakpoint-md-plus-1: 769px-
--breakpoint-lg-max: 1279.98px（用于max-width边界控制）
配合 clamp() 或 minmax() 实现流体断点逻辑
自定义属性和响应式函数搭配，能减少媒体查询数量。比如用 clamp() 替代多层 @media 控制字体大小：
:root {
--fs-base: 1rem;
--fs-min: 0.875rem;
--fs-max: 1.25rem;
}
h1 {
font-size: clamp(var(--fs-min), 1rem + 0.5vw, var(--fs-max));
}
这里 var(--fs-min) 和 var(--fs-max) 起到语义化作用，方便后期统一调整范围。同理，grid-template-columns 用 minmax(var(--grid-min), 1fr) 也能让列宽下限可配置。
性能影响几乎为零 —— 这些函数本身是运行时计算，变量只是替换了字面量，不增加解析负担。
避免在组件级作用域里重定义断点变量
有人喜欢在某个组件的 CSS 里写：
.card {
--breakpoint-sm: 576px;
@media (min-width: var(--breakpoint-sm)) { ... }
}
这不会生效。自定义属性的作用域虽支持继承，但媒体查询是全局解析阶段执行的，此时 .card 的局部变量尚未作用于 @media 上下文。
正确做法始终是把断点变量放在顶层（:root 或一个共享的 base.css 中），并确保它被所有用到的地方 import 或 link 到。
容易被忽略的一点：如果项目用了 CSS 模块（CSS Modules）或 Shadow DOM，变量不会自动穿透，得显式通过 :host 或 ::part() 暴露，否则子组件读不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
