media="print" 是声明样式表仅用于打印上下文的必需属性，必须显式设置且大小写敏感、无空格；不加则打印预览无效，而 media="screen,print" 会干扰首屏渲染。
media="print" 不是用来“启用打印功能”的开关，而是告诉浏览器：这张样式表只在打印上下文里参与渲染。不加它，哪怕 CSS 写得再全，打印预览里也看不到效果。
link 标签的 media="print" 必须显式声明
浏览器默认把 <link rel="stylesheet"> 当作 media="all" 处理，而打印时只加载明确标记为 print（或包含 print）的样式表。
-
media="print"是最干净的做法，确保该文件只在打印时解析，不影响页面首屏渲染和样式计算 -
media="screen,print"会强制浏览器在页面加载时就下载并解析这张表，可能干扰开发调试，上线前应改回print -
media="PRINT"或media=" print "（带空格）无效——大小写敏感、不可有前后空格 - 别用
@import在主 CSS 里导入 print 规则，Safari 和旧版 Edge 在打印上下文中常跳过它
@media print 块里为什么没生效？优先级和默认限制是主因
写了 @media print { body { color: red; } } 却还是黑字，不是语法错，而是被更高权重的规则压住了，或者浏览器主动禁用了某些属性。
- 普通 CSS 中若有
body { color: #333 !important; }，那@media print里的color: red就会被覆盖——media属性不提升选择器权重 - Chrome/Firefox 默认不打印
background-color和background-image，必须加三重声明：-webkit-print-color-adjust: exact !important;、print-color-adjust: exact !important;、color-adjust: exact !important; - Bootstrap 等框架自带
@media print重置块，会清掉你的字号、边距等，得在 DevTools 的 Computed 面板切换到print媒体下查最终值
打印样式必须处理浏览器的“默认静音”行为
很多样式在屏幕上看正常，一进打印就消失，不是你漏写了，而是浏览器在打印上下文里悄悄关掉了它们。
-
<a href="...">链接</a>默认带下划线和蓝色，但打印时不显示；需显式写a:link, a:visited { color: #000 !important; text-decoration: none; }，必要时补a::after { content: " (" attr(href) ")"; } -
img宽度若未约束，高 DPI 图片会撑破 A4 纸（210mm 宽），应加img { max-width: 100% !important; height: auto !important; } - 字体单位建议用
pt（如font-size: 12pt），比px更稳定对应物理尺寸；rem在部分打印引擎中计算异常 - 分页控制别只靠
page-break-inside: avoid，对<table> 效果差，优先包一层 <code><div class="print-table"> 并设 <code>.print-table { break-inside: avoid; }独立
print.css比内联<style media="print"></style>更可靠虽然
<style media="print"></style>语法合法，但实际容易失控：它和主 CSS 文件里的@media print共享层叠规则，且无法隔离调试环境。- 推荐新建
print.css，只放打印专用规则，不混任何screen相关代码 - 引入方式统一用：
<link rel="stylesheet" href="print.css" media="print"> - 测试时务必导出 PDF 实际验证，不能只信 DevTools 的 Print Preview——预览器会平滑分页，PDF 才暴露真实断裂点
- 如果用了 UI 框架，先确认它是否注入了全局
@media print，再决定是覆盖它，还是用!important强制接管
media="print"，而是浏览器在打印上下文里那一套默认关闭、优先级重算、单位失效、分页不一致的组合行为。每个环节都得单独验，不能假设“写了就等于起效”。 - 推荐新建
