@media print 是唯一可靠的打印样式控制方式，必须包裹在媒体查询内，避免全局 display: none；需注意移动端兼容性、可访问性及父容器隐藏导致子元素样式失效等问题。
@media print 是唯一可靠的方式，别用全局 display: none
直接写 .no-print { display: none; } 会导致元素在页面加载时就消失，根本不是“打印时隐藏”，而是“永远看不见”。真正起作用的必须是包裹在 @media print 块里的规则。浏览器只在触发打印（或打印预览）时才解析这部分样式，其他时候完全忽略。
常见错误包括：
- 把
@media print写在外部，或漏掉花括号、分号 - 用中文标点（如全角冒号、括号），导致整个媒体查询失效
- 规则被更高权重的内联样式或 JS 动态 class 覆盖，没加
!important
推荐写法：
@media print {
.sidebar, .toolbar, .print-button {
display: none !important;
}
}
display: none 在移动端打印预览中可能失效，得换策略
Safari iOS 和 Chrome for Android 的打印预览常复用屏幕渲染逻辑，@media print 里的 display: none 有时压根不生效——不是你写错了，是浏览器没真正注入这条规则。
更稳妥的做法是用 class 切换 + CSS 变量控制，例如：
先定义变量：
:root {
--print-mode: 0;
}
@media print {
:root {
--print-mode: 1;
}
}
再配合 JS 在打印前加类：
window.addEventListener('beforeprint', () => {
document.body.classList.add('print-active');
});
window.addEventListener('afterprint', () => {
document.body.classList.remove('print-active');
});
然后写样式：
.no-print {
visibility: hidden;
position: absolute;
left: -9999px;
}
.print-active .no-print {
display: none;
}
别依赖 visibility: hidden 或 opacity: 0 替代 display: none
visibility: hidden 元素仍占文档流位置，打印时可能撑开空白、错位；opacity: 0 更危险——它完全不影响布局，且部分读屏器仍会朗读内容，不符合可访问性要求。
如果必须保留占位（比如防止打印后段落跳页），可用组合方案：
@media print {
.header {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
}
但注意：这个 hack 在 Safari iOS 上有重绘 bug，且不能用于含子元素交互逻辑的容器（比如带 focus 管理的表单区域）。
父容器 display: none 会让子元素的 print 样式彻底失效
如果某个外层容器（比如 .app-wrapper）本身用了 display: none，那么即使你在 @media print 里对它的子元素写 display: block，也毫无作用——因为父级已脱离渲染树，子元素根本不会被计算。
此时必须确保打印所需的结构在 DOM 中始终存在，且父级不可为 display: none。可行做法包括：
- 改用
visibility: hidden+position: absolute隐藏非打印区域 - 用
aria-hidden="true"配合display: none，兼顾可访问性 - 在打印前用 JS 临时移除不需要的节点，打印后再恢复（注意事件监听器需重新绑定）
最麻烦的不是写错一行 CSS，而是没意识到：打印样式生效的前提，是那个元素得先被浏览器“看见”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
