display: none 在 @media print 中不生效，主因是移动端浏览器打印预览复用屏幕渲染逻辑、样式覆盖或 @media print 规则未注入；应改用 css 变量配合 class 切换控制隐藏，并注意 @page 仅管纸张设置、不可选中元素。
为什么 display: none 在 @media print 里有时不生效
不是你写错了，而是浏览器（尤其是 Safari iOS、Chrome for Android）在打印预览阶段会复用部分屏幕渲染逻辑，display: none 可能被内联样式、JS 动态 class 或更高权重的屏幕规则覆盖。更麻烦的是，某些移动端 WebView 对 @media print 的解析是“懒加载”式的——样式表已加载，但规则未真正注入打印上下文。
用 CSS 变量控制隐藏逻辑比硬写 display: none 更可控
把是否隐藏的决策权交给变量，既方便调试，也避免被其他样式意外覆盖。关键不是“能不能藏”，而是“什么时候藏、谁来决定藏”。
- 在根元素定义开关变量：
:root { --print-hide: 0; }，值为0表示不隐藏，1表示隐藏 - 在
@media print中统一启用：@media print { :root { --print-hide: 1; } } - 目标元素用
visibility+position组合响应变量：.header { visibility: var(--print-hide, 0) == 1 ? hidden : visible; position: var(--print-hide, 0) == 1 ? absolute : static; left: var(--print-hide, 0) == 1 ? -9999px : auto; } - 注意：纯 CSS 变量无法直接做条件判断，上面是示意逻辑；实际需配合预处理器（如 Sass）或 JS 注入 class 切换，例如：
@media print { .print-hidden { visibility: hidden; position: absolute; left: -9999px; } }，再用 JS 根据--print-hide值切换 class
@page 和 @media print 的作用边界必须分清
@page 只管纸张本身：尺寸、边距、方向；它不能选中 HTML 元素，也不能影响字体、颜色、显示/隐藏。所有元素级操作（隐藏导航、重设链接、调整段落间距）都得靠 @media print 里的规则完成。
-
@page { size: A4; margin: 1cm; }是安全的，所有主流浏览器都支持 -
@page :first { margin-top: 2cm; }在 Chrome 和 Firefox 中有效，但在 Safari 打印预览里常被忽略 - 不要试图用
@page隐藏元素——它根本不接受选择器，写了也无效 - 如果发现页眉页脚删不掉，不是 CSS 问题，而是浏览器打印设置里「页眉页脚」开关没关（Ctrl+P → 更多设置 → 关闭）
移动端打印时最易被忽略的三个细节
真机打印一次，比调十分钟预览更有说服力。以下三点在 iOS 和安卓上高频出问题：
-
-webkit-text-size-adjust: 100%必须加在@media print的body上，否则 Safari 会按视口宽度自动放大字体，A4 宽度瞬间撑爆 - 动态插入的内容（如
.loading、.modal）不会因父容器display: none而消失，得单独加打印隐藏规则 - 图片默认不打印背景色，即使写了
background: #fff，也要手动勾选「打印背景图形」——这个选项在 Chrome 打印设置里叫「Background graphics」，在 Safari 里藏在「更多选项」下
window.print() 触发前还没来得及读取变量并打上 .print-hidden 类。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
