css变量不能用于@media断点，因规范禁止其参与媒体查询条件计算；正确做法是在@media中重设:root变量值，如@media (max-width:767px){:root{--gap:.5rem}}。
CSS变量本身不能直接驱动响应式逻辑，它只是“值的容器”；真正起作用的是媒体查询、容器查询或JS对变量的重设——变量只是让这些机制更集中、更易维护。
为什么不能在@media里用var()写断点
浏览器规范明确禁止在媒体查询条件中使用var()，比如@media (min-width: var(--sm))这种写法会整条规则静默丢弃，不是报错，而是完全不生效。原因在于媒体查询必须基于静态、可预解析的字面量（如768px），而var()是运行时计算值。你看到的“没反应”，其实是语法被忽略，不是变量没传过去。
在@media中重设:root变量才是正解
想让整个页面响应，就在@media块里修改:root下的变量值。关键点在于：变量必须定义在:root，且每个断点只覆盖需要改的变量，不带默认值。
- 错误写法：
:root { --gap: 1rem; }→ 这个--gap会在所有断点下都存在，小屏也会加载大屏用的值 - 正确写法：
@media (max-width: 767px) { :root { --gap: 0.5rem; } }和@media (min-width: 768px) { :root { --gap: 1rem; } } - 后续样式统一用
padding: var(--gap);，没有 fallback 值，避免冗余计算
grid-template-columns能用var()，但grid-template不行
grid-template是简写属性，包含rows、columns和areas三部分，而浏览器不支持在其中混用变量和字符串区域名。一旦写成grid-template: "header" / var(--cols)，整条规则会被丢弃。
- 安全做法：只对
grid-template-columns或grid-template-rows用var()，例如grid-template-columns: repeat(var(--col-count), 1fr); -
--col-count必须是纯数字（如3），不能带单位或引号（"3"或3px都会让repeat()失败） -
grid-template-areas必须是完整字符串，只能靠不同@media块分别声明整套结构，无法“拼接”
图片URL切换必须让--img-url声明本身按需出现
只要CSS里写了url(var(--img-url))，而--img-url在任意地方有定义（哪怕在:root里设了默认值），浏览器就会提前加载那个图片。真正的按需加载，靠的是“声明不存在”。
- 错误：
:root { --img-url: "fallback.jpg"; }→ fallback 图永远加载 - 正确：只在对应断点内定义变量，例如
@media (min-width: 768px) { :root { --img-url: "large.jpg"; } }，再配合background-image: url(var(--img-url)); - 别试图用
calc()拼URL，url('img/' + calc(...))是非法语法，CSS不支持字符串运行时拼接
最容易被忽略的不是怎么写变量，而是变量是否真的“只在该出现的地方出现”——作用域错一层、多一句默认值、单位混一格，都可能导致请求提前发出、布局意外崩塌或字体计算失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
