css变量在@media print中不会自动切换，必须显式重写才能生效；因变量是静态快照而非响应式监听器，打印时仍取页面加载时:root定义的值，需在@media print {:root {}}中重新声明所有影响打印效果的变量。
CSS变量在@media print中不会自动切换，必须显式重写才能生效。 浏览器解析时只取当前作用域下已声明的值，:root里定义的--text-color: #007bff，如果@media print里没重写，打印出来还是蓝色——不是“没生效”，而是根本没被换掉。
为什么@media print里var()取的还是屏幕值？
因为CSS变量是静态快照，不是响应式监听器。var(--text-color)在打印上下文里读取的，仍是页面加载时:root那一轮赋的值。媒体查询本身不触发变量刷新，它只启用/禁用规则块；变量值是否改变，全看你有没有在那个块里重新声明。
常见错误现象：
- 写了
@media print { :root { --text-color: #000; } }，但DevTools里计算值仍是旧色 → 实际可能没加载该CSS，或被更高优先级样式覆盖 - 用
html { --text-color: #000; }代替:root→html不继承变量，:root才是标准根作用域 - 在组件内部写
.report { --text-color: #000; }→ 打印时该选择器可能不匹配，或级联顺序靠后被覆盖
哪些变量必须在@media print中重写？
所有被var()引用、且影响打印效果的变量，都要在@media print { :root { } }里成对出现。漏一个，就可能让文字看不见、边框消失或间距错乱。
重点覆盖这几类：
-
颜色类：
--text-color、--link-color、--border-color、--bg（建议设为#000或#fff） -
间距类：
--spacing-unit、--margin-base（推荐用pt或mm，避免rem在不同DPI下缩放偏差） -
控制类：
--print-hidden（配合class="hidden-print"做逻辑隐藏，比直接display: none更可靠）
别塞进去的：--hover-bg、--transition-speed这类纯交互变量，打印时永不触发，写了白占体积。
怎么验证变量真被重置了？
别信“看起来应该变了”，用DevTools看真实计算值：
- 打开打印预览（
Cmd+P/Ctrl+P），确保处于「打印」视图模式（不是普通页面） - 在Elements面板选中目标元素，右侧Styles面板找到
var(--text-color)那行 - 点开小箭头，看“Computed”列显示的值——如果是
#000，说明重写成功；如果还是#007bff，说明@media print { :root { --text-color: #000; } }没生效或没加载
Chrome打印预览会缓存旧CSS规则，改完变量后务必强制刷新预览窗口（Cmd+R / Ctrl+R），否则永远看不到最新效果。
最易忽略的点：变量重写必须写在@media print块内、:root选择器下，且不能加!important（语法错误）。顺序也很关键——同一变量在@media print里声明得越靠后，越容易覆盖前面同名规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
