移动端导航在打印时需用独立@media print规则隐藏，优先添加.no-print类并配合display: none !important，对fixed元素补visibility: hidden !important和pointer-events: none !important，避免与响应式样式混用。
移动端导航元素在打印时不该出现，但直接套用 display: none 在 @media print 里常失效——不是你写错了，而是它本就不是为打印设计的。
为什么移动端导航在打印时还露出来？
常见原因不是 CSS 没生效，而是：
- 导航栏用了 position: fixed 或 transform，部分浏览器（尤其 Safari iOS）打印引擎未完全重置其渲染状态
- 页面加载了 media="screen" 的样式表，@media print 规则根本没注入
- 导航组件由框架（如 React/Vue）动态插入，且没带 no-print 类，JS 插入时机晚于打印触发
- 用了 visibility: hidden 或 opacity: 0，它们对打印输出无效
@media print 中怎么写才真正隐藏？
别碰结构选择器或 ID，优先用语义化类名 + 强制覆盖：
- 给导航容器加统一类名，比如 class="mobile-nav no-print"
- 在所有其他 CSS 加载完毕后，追加这段规则（确保顺序靠后）：
@media print {<br> .no-print { display: none !important; }<br>}
- 若导航含 position: fixed（如底部悬浮菜单），补上兜底：@media print {<br> .mobile-nav {<br> visibility: hidden !important;<br> pointer-events: none !important;<br> }<br>}
移动端导航和打印样式混用的坑
很多项目把「移动端隐藏」和「打印隐藏」逻辑混在一起，结果互相干扰：
- 错误写法：@media (max-width: 768px), print { .nav { display: none; } } → 手机端永远看不见，打印时也可能漏掉其他需要保留的元素
- 正确拆分：移动端用 @media (max-width: 480px) 控制显示/隐藏；打印用独立 @media print 控制输出内容
- 如果导航是响应式组件（如 Bootstrap 的 navbar-collapse），别依赖 d-none d-md-block 这类类名——它在打印时也生效，可能误杀页眉
真机验证比预览更关键
Chrome 打印预览能模拟大部分行为，但 iOS Safari 和安卓 WebView 对 @media print 的解析仍是“懒加载”式：样式表已加载，规则却未必注入。最稳妥的做法是：
- 在真机上用系统分享菜单 → “打印” → 看实际输出
- 特别注意 -webkit-text-size-adjust: 100% 是否加在 @media print 的 body 上，否则 Safari 会按视口宽度放大字体，A4 宽度直接撑爆
- 动态导航（如 JS 生成的汉堡菜单）必须在 window.print() 前手动加 no-print 类，不能等 CSS 自动匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
