media="print" 必须独立引入，不能混在主css中；常见失效原因是被覆盖、media值错误（如大小写或缺引号）、框架重置干扰，正确做法是新建print.css并用引入。
media="print" 必须独立引入，不能混在主样式里
写了 @media print 却没反应？大概率是因为它被塞进了主 CSS 文件末尾，结果被前面的 .header { display: block; } 覆盖了。浏览器不会因为加了 @media print 就自动提升权重，它照样走层叠规则。
更隐蔽的问题是：用 media="screen" 的 <link> 引入样式表，该文件压根不进打印渲染树。框架如 Bootstrap 还自带 @media print 重置，会默默覆盖你的 font-size 或 margin。
正确做法只有一条：新建独立文件 print.css，只放打印专用规则，不混任何 @media screen 或通用样式，并在 HTML 中这样引入：
<link rel="stylesheet" href="print.css" media="print">
注意：media="print" 必须小写、英文双引号包裹；media="PRINT" 或 media=print（缺引号）都无效；也不要写成 media="screen, print"——那会让浏览器在页面加载时就拉取并解析，可能干扰屏幕样式。
字体、单位、颜色必须物理化，rem/%/em 全部禁用
打印时 rem、%、px 换算不可控，Web Font 加载失败会导致中文变方块，背景色默认不输出——这不是 bug，是规范行为。
字号统一用 pt（如 font-size: 12pt）或 mm（如 font-size: 4.2mm）；中文字体栈强制用系统安全字体：font-family: "Microsoft YaHei", SimSun, sans-serif;；等宽内容（<pre class="brush:php;toolbar:false;"></pre>、<code>）指定：font-family: "Courier New", monospace;。
要打印背景色或图片，必须三重声明：
color-adjust: exact !important;-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;
三者缺一不可，仅靠一个或两个在 Safari 或旧 Edge 中大概率失效。
表格、分页、页眉页脚必须显式控制，不能依赖自然流
表格劈成两半、标题孤行、导航栏印满一页——这些问题都源于没干预打印流的自然断点。
表格必须设 <thead> 和 <code><tfoot>，并加：
<pre class="brush:php;toolbar:false;">@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}</pre>
<p>避免元素被割裂：<code>page-break-inside: avoid; 和 break-inside: avoid; 要双写，前者兼容旧版 Chrome/IE，后者是现代标准。
页眉页脚推荐用 position: fixed + @media print 精准激活：
@media print {
header { position: fixed; top: 0; width: 21.0cm; height: 4.0cm; }
footer { position: fixed; bottom: 0; width: 21.0cm; height: 2.5cm; }
main { margin-top: 4.0cm; margin-bottom: 2.5cm; }
}
Safari 对 fixed 支持不稳定，务必加 !important 并预留内容空间，否则页眉会压住正文。
隐藏非内容元素必须用 .no-print + display: none，别信 visibility: hidden
统一加 class="no-print"，然后写：
@media print {
.no-print { display: none !important; }
}
不用 visibility: hidden，它保留盒模型空间，可能导致空白页或错位；某些 PDF 打印驱动甚至会跳过 display: none 的整块内容，所以更稳妥的做法是配合位移：
@media print {
.no-print {
display: none !important;
position: absolute !important;
left: -9999px !important;
}
}
调试时打开 Chrome 打印预览 → DevTools → Computed 面板 → 左上角切换为 “print” 媒体，看目标元素最终计算值。普通浏览状态下 Styles 面板里看不到 print.css 规则是正常行为，不代表它坏了。
最复杂的点在于：所有这些规则都得在打印上下文中真正注入。现代框架（尤其 CSS-in-JS 或 SSR）常默认不把 @media print 注入到最终 <style></style> 标签里，哪怕源码写了。务必检查 Elements 面板，确认 <style></style> 里真有生效的 @media print 内容，而不是只存在于 JS 模块里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
