打印时导航栏隐藏需用独立@media print规则，通过.no-print类统一控制，避免与移动端逻辑混用，并确保真实设备验证。
响应式设计中的导航栏在打印时自动隐藏，关键不是“复用移动端逻辑”，而是为打印建立独立、强效、可验证的样式控制路径。移动端隐藏靠 @media (max-width: ...)，而打印隐藏必须走 @media print，两者不能混写，也不能依赖同一套类名或选择器逻辑。
用 .no-print 类统一标记需隐藏的元素
给所有不参与打印的结构（如导航栏、广告位、操作按钮）添加语义化类名，例如：<nav class="mobile-nav no-print">...</nav><aside class="ad-banner no-print">...</aside>
这样做的好处是：类名轻量、易维护、权重可控，避免被屏幕样式意外覆盖。
- 在所有其他 CSS 加载完毕后，追加一条高优先级规则（确保它在样式表末尾）：
@media print { .no-print { display: none !important; } }- 如果导航使用了
position: fixed（如底部悬浮菜单），再补一句兜底： @media print { .mobile-nav { visibility: hidden !important; pointer-events: none !important; } }
避开常见失效陷阱
很多页面在打印预览里导航仍显示，并非 CSS 写错，而是环境或加载机制出了问题：
- 检查是否用了
<link media="screen">引入样式表——这会导致@media print规则根本没加载 - 确认没有内联样式（如
style="display: block"）强行覆盖了打印规则 - 动态插入的导航（如 React 渲染的汉堡菜单）要在
window.print()前手动加no-print类，不能只靠 CSS 匹配 - 别用
visibility: hidden或opacity: 0替代display: none——它们对打印输出完全无效
真机验证比浏览器预览更可靠
Chrome 打印预览能模拟大部分行为，但 iOS Safari 和部分安卓 WebView 对 @media print 的解析存在延迟或懒加载现象。
- 务必在真实设备上通过系统分享菜单 → “打印” 流程查看最终输出
- 特别注意 Safari：需在
@media print中为body加上-webkit-text-size-adjust: 100%，否则字体可能被放大导致排版溢出 - 若导航含 JS 初始化逻辑（如下拉状态、高度计算），隐藏前应暂停或销毁，避免
getBoundingClientRect()返回异常值影响打印布局
不要和响应式逻辑混用
错误写法：@media (max-width: 480px), print { .nav { display: none; } }
这会让手机端永远看不到导航，且打印时可能误杀其他需要保留的元素。
- 正确做法是彻底拆开：移动端用
@media (max-width: 480px)控制显示/隐藏 - 打印用独立的
@media print控制输出内容 - 如果用的是 Bootstrap 的
navbar-collapse，别依赖d-none d-md-block类——它在打印时也会生效，可能连页眉一起干掉
