css变量在@media print中不会自动切换，必须显式重设：因变量是静态快照而非响应式状态，浏览器解析时仅读取当前作用域已声明值；若:root定义--text-color: #007bff而@media print未重写，打印仍为蓝色。
为什么@media print里CSS变量没变
因为CSS变量不是响应式状态，@media print不会自动切换它们的值。浏览器在解析样式时只读取当前作用域下已声明的变量——如果:root里定义了--text-color: #007bff，但@media print里没重写它，打印时就还是蓝色，不是你期望的黑色。
- 变量是静态快照，不是监听器；
var(--text-color)在打印上下文里取的仍是屏幕端那一次赋值 - DevTools 的 Styles 面板在打印预览模式下显示的计算值，才是真实生效值——别信“看起来应该变了”
- Chrome 打印预览会缓存旧 CSS 规则，改完变量后务必强制刷新预览窗口（Cmd+R / Ctrl+R）
必须在@media print中显式重写哪些变量
所有被var()引用过、且影响打印效果的变量，都得在@media print { :root { ... } }里重新声明。漏一个，就可能让整块样式错乱。
-
颜色类：
--text-color、--link-color、--border-color、--bg -
间距类：
--spacing-unit、--margin-base（建议用pt或mm单位，避免rem缩放偏差） -
控制类：
--print-hidden（用于配合 class 切换隐藏逻辑），不要用display: none直接硬写，移动端容易失效 -
别塞进去的：
--hover-bg、--transition-speed这类纯交互变量，打印时根本不会触发，写了白写还增加维护成本
重写变量时最容易踩的坑
看似写了重定义，实际没生效，问题常出在作用域、顺序或选择器上。
- 写成
@media print { html { --color: #000; } }→ 错，html不是变量继承根，必须用:root或html:root - 在组件内部分散定义：
.report { --color: #000; }→ 错，打印时该选择器可能不匹配，或级联被覆盖 - 把重定义写在
@media print块末尾，但前面已有同名规则被更高优先级样式覆盖 → 变量级联按顺序，后声明才生效 - 加
!important到变量赋值里：--color: #000 !important→ 语法错误，无效
怎么验证变量是否真被重置了
别靠肉眼猜，用 DevTools 真实看计算结果。
- 打开打印预览（Ctrl+P / Cmd+P），确保处于「打印」视图模式
- 在 Elements 面板选中目标元素，右侧 Styles 面板里找到对应
var(--text-color)那一行 - 点开小箭头，看“Computed”列里显示的实际值——如果是
#000，说明重写成功；如果还是#007bff，说明@media print { :root { --text-color: #000; } }没生效或没加载 - 检查标签的
media属性是否严格为print（大小写敏感，不能是prnt或all print）
最常被忽略的一点：变量命名要语义清晰，比如用--print-text-color而不是复用--text-color再靠媒体查询覆盖——后者一旦漏写，就全乱套；前者从源头隔离，调试和协作都更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
