media="print" 仅在打印上下文激活，普通浏览时完全不加载；必须通过 DevTools 的 Rendering 面板模拟 print 媒体或实际触发打印预览才能验证效果，且大小写敏感、不可带空格或多余值。
media="print" 不会自动切换，必须显式声明且仅在打印上下文激活——刷新页面、切设备模式、开 DevTools 都不会让它生效，只有触发打印预览或导出 PDF 时才起作用。
为什么写了 media="print" 却看不到效果
这是最常被误解的点：浏览器根本不会在普通浏览中加载或应用 media="print" 的样式表。它不是“开关”，而是“条件加载指令”。
-
<link rel="stylesheet" href="print.css" media="print">在页面加载时被忽略，Network 面板里也看不到请求 - DevTools 的 Elements 或 Styles 面板里，该 CSS 文件显示为 “inactive” 或灰色，属正常现象
- 哪怕
print.css里写了body { background: red; }，日常打开页面也永远是白底 - 想验证是否生效？必须进入打印上下文——用 DevTools 的 Rendering 面板勾选
Emulate CSS media → print
如何快速验证 media="print" 是否真起作用
别靠 Ctrl+P → 取消 → 再 Ctrl+P 循环测试，效率低还容易误判。直接用开发者工具实时模拟：
- 打开 DevTools（F12 或 Cmd+Opt+I）
- 右上角「⋯」→ More Tools → Rendering
- 勾选
Emulate CSS media，下拉选print - 此时页面立刻重绘：背景变白、文字变黑、
.no-print类元素消失、分页线可能浮现 - 同时
window.matchMedia('print').matches返回true，可用于 JS 控制打印前逻辑（如禁用按钮）
media="print" 和 @media print 能混用吗
能，但没必要，且容易埋坑。
立即学习“前端免费学习笔记（深入）”；
- 两者语义等价：
<link href="print.css" media="print">等效于在主 CSS 里写@media print { ... } - 混用时优先级不直观：外部
print.css里的规则和主文件里的@media print块会一起参与层叠，调试时容易漏掉某一处覆盖 -
@import在主 CSS 里导入 print 规则风险高：Safari 和旧版 Edge 在打印上下文中常跳过它，导致样式丢失 - 推荐统一策略：要么全用
<link media="print">外链分离，要么全用@media print内联块，避免交叉维护
容易被忽略的兼容性细节
写了 media="print" 并不等于万事大吉，这些细节不处理，打印出来还是错乱：
-
media="PRINT"或media=" print "（带空格）无效——大小写敏感，前后不能有空格 -
media="screen,print"会让浏览器在页面加载时就下载并解析该 CSS，干扰首屏渲染，上线前务必改回print - 图片默认不打印背景色/渐变，需三重声明：
-webkit-print-color-adjust: exact !important;、print-color-adjust: exact !important;、color-adjust: exact !important; -
a标签在打印时默认无颜色、无下划线，需显式重置：a:link, a:visited { color: #000 !important; text-decoration: none; }，必要时加a::after { content: " (" attr(href) ")"; }
真正麻烦的从来不是写几行 display: none，而是浏览器在打印上下文里悄悄关掉了哪些样式、哪些属性被框架重置覆盖、哪些伪元素在 PDF 导出时失效——得进打印模拟模式，一行一行看 Computed 样式，而不是凭感觉调。
