@media print必须独立包裹规则、用pt/cm单位、显式控制分页与隐藏元素，否则不生效；常见失效原因包括未嵌套样式、link漏media="print"、@import引入被忽略、被高权重屏幕样式覆盖或调试误信devtools模拟。
@media print 必须独立声明、物理单位锚定、分页逻辑显式控制，否则打印预览里看到的仍是屏幕样式。
为什么写了 @media print 却没效果？
不是语法错，是浏览器压根没让它参与打印渲染流程。常见硬性失效原因：
-
@media print块没包裹具体规则，比如只写了@media print {}空壳 - 把打印样式直接写在全局 CSS 里，没嵌套进
@media print，例如.sidebar { display: none; }在打印时完全无效 -
<link>引入时漏掉media="print"，写成media="all"或干脆不写，该文件就会被当成屏幕样式加载 - 用
@import在主 CSS 中导入打印样式，Safari 和旧版 Edge 会跳过执行
怎么组织 @media print 才真正生效？
推荐分离式结构，避免和屏幕样式耦合或被框架覆盖（如 Bootstrap 自带的 @media print 重置）：
- 新建独立文件
print.css，只放打印专用规则，不混任何@media screen或通用样式 - HTML 中用：
<link rel="stylesheet" href="print.css" media="print">—— 注意大小写、空格，media="PRINT"或media=" print"都无效 - 所有字体单位用
pt或cm，禁用rem、%、em；中文字体栈强制写死：font-family: "Microsoft YaHei", SimSun, sans-serif; - 要输出背景色或图片，必须三重声明：
color-adjust: exact;、-webkit-print-color-adjust: exact;、print-color-adjust: exact;
表格、分页、隐藏元素的关键控制点
打印排版断裂、标题孤行、导航占满一页，基本都出在这里：
- 隐藏非内容元素统一加
class="no-print"，然后写：@media print { .no-print { display: none !important; } }—— 不要用visibility: hidden，它保留盒模型空间 - 表格必须有语义化结构：
<thead> + <code><tbody>；<code>thead要设display: table-header-group，才能跨页重复显示 - 防止单元格被劈开：对
<tr> 或关键容器加 <code>page-break-inside: avoid; - 避免标题单独占一页：对
h1、h2加page-break-after: avoid;和orphans: 3; widows: 3; -
@page必须嵌套在@media print内，单独写无效；横向打印需配对使用：@page landscape { size: A4 landscape; }+.landscape-content { page: landscape; }
调试时最容易被忽略的细节
Chrome DevTools 的「Emulate CSS media type → print」只模拟样式计算，不触发真实分页、@page 规则或纸张尺寸行为。很多问题——比如表格跨页错位、空白页、page-break-inside: avoid 失效——只有真机打印或导出 PDF 才暴露。建议在 print.css 开头加临时 debug 规则：@media print { * { outline: 1px solid red !important; } }，快速定位哪些元素实际参与了打印流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
