@media print 必须独立文件+media="print"引入，用pt/mm单位、禁用rem/%/em，显式声明color-adjust，表格设thead/tfoot并避免分页断裂，隐藏元素用.no-print+display:none。
@media print 不是“加了就能用”，它必须独立、优先、物理单位锚定，否则打印预览里看到的还是屏幕样式。
为什么写了 @media print 却没反应
不是语法错误，而是浏览器根本没让它生效——@media print 不自动提升选择器权重，也不绕过 CSS 层叠规则。
- 常见错误：把
@media print塞在主 CSS 文件末尾，结果被前面的.header { display: block; }覆盖 - 更隐蔽的问题：用了
media="screen"的<link>引入样式表，该文件压根不会进打印渲染树 - 框架干扰：Bootstrap 等自带
@media print重置，会默默覆盖你的font-size或margin - 调试建议：打开 Chrome 打印预览 → DevTools → Computed 面板 → 左上角切换为 “print” 媒体，看目标元素最终计算值
怎么写才真正生效（推荐配置方式）
最可靠的方式是分离 + 显式声明，避免任何歧义或加载时机问题。
- 新建独立文件
print.css，只放打印专用规则，不混任何@media screen或通用样式 - 在 HTML 中用：
<link rel="stylesheet" href="print.css" media="print">—— 注意大小写和空格，media="PRINT"或media=" print"都无效 - 不要用
@import在主 CSS 里导入打印样式，Safari 和旧 Edge 常跳过 - 禁止在
@media print里写* { margin: 0; }这类通配符，会破坏<table> 的默认 display 行为<h3>字体、单位、颜色必须物理化</h3> <p>rem、%、px 在打印时换算不可控，Web Font 加载失败会导致中文变方块，背景色默认不输出——这些不是 bug，是规范行为。</p> <ul> <li>字号统一用 <code>pt（如font-size: 12pt）或mm（如font-size: 4.2mm），禁用rem、%、em - 中文字体栈强制用系统安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif; - 等宽内容（
<pre class="brush:php;toolbar:false;"></pre>、<code>）指定：font-family: "Courier New", monospace; - 要打印背景色或图片，必须三重声明：
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><tfoot>，并加 <code>thead { display: table-header-group; }、tfoot { display: table-footer-group; } - 防跨页断裂：
table { page-break-inside: avoid; }，tr { break-inside: avoid; }（部分浏览器需配合display: table-row） - 防孤行/寡行：
p, li { orphans: 3; widows: 3; }（仅在 print 媒体中生效）
真正难的不是写几行 @media print，而是接受「打印是另一套渲染通道」——它不继承屏幕布局逻辑，不支持 Flex/Grid 断点，也不信任你写的 !important。每次改完，务必用打印预览（不是截图）验证，尤其是跨页、字体、表格这三处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
