media="print"是唯一让浏览器在打印上下文加载样式的硬性条件，其他写法如media="all"或漏写该属性均会失效；必须严格小写、置于head内、配全rel="stylesheet"，且需通过DevTools模拟print媒体或真实Ctrl+P预览验证。
media="print" 是唯一能让浏览器在打印上下文加载并应用样式表的硬性条件，其他写法（比如 media="all" 或漏掉该属性）在真实打印中大概率失效。
为什么 print 样式表总不生效？
不是代码没写，而是浏览器根本没让它“活”起来——media="print" 的样式表在普通浏览时完全不参与渲染，Network 面板里看不到请求、Elements 面板里显示为灰色、Styles 面板里查不到规则，这都属正常。常见误判点：
- 用
Ctrl+P打开又取消，反复试几次就以为“没反应”，其实得真进打印预览才触发 - 写了
media="print"却把<link>放在<body>里，导致部分旧浏览器直接忽略 - 路径写错（比如少个
css/前缀），控制台报Failed to load resource但被你忽略了 - 主样式表里有未加
@media print限定的全局规则（如body { margin: 0 }），把 print 样式覆盖掉了
怎么验证 media="print" 真正起作用？
别靠反复 Ctrl+P，效率低还容易漏细节。用 DevTools 实时模拟才是正解：
- 打开 DevTools（
F12或Cmd+Opt+I） - 右上角「⋯」→ More Tools → Rendering
- 勾选 Emulate CSS media，下拉选
print
此时页面立刻变样：背景白、文字黑、.no-print 元素消失、分页线可能浮现——这才是真正进入打印上下文的表现。注意：media 值大小写敏感，PRINT 或 print （带空格）都不行。
立即学习“前端免费学习笔记（深入）”；
link 标签必须放 head 里，且不能省略 rel="stylesheet"
<link> 放在 <body> 中会导致 FOUC（无样式内容闪现），IE6–8 更是直接跳过不加载。同时，rel="stylesheet" 必须全小写、不可省略，否则浏览器当普通链接处理，样式压根不会解析。
- 正确写法：
<link rel="stylesheet" href="print.css" media="print"> - 错误写法：
<link rel="styleSheet" href="print.css" media="print">（大小写错） - 错误写法：
<link href="print.css" media="print">（缺rel） - 错误写法：
<body><link rel="stylesheet" href="print.css" media="print"></body>（位置错）
打印样式调试时最易忽略的三个点
很多样式在预览里看着对，一导出 PDF 或真机打印就变形，问题常出在这些隐性细节上：
-
display: none虽能隐藏元素，但会破坏屏幕阅读器可访问性；更稳妥的是用visibility: hidden+position: absolute移出可视区 - 慎用
%、em、rem这类相对单位，打印引擎对它们的解析不稳定；优先用pt或in（如font-size: 12pt） - 外部资源（比如
background-image: url(...)）在多数打印驱动里默认禁用，背景色也常被用户设置“不打印背景图形”给关掉
真正可靠的调试方式，是每次改完都导出 PDF 再打开看——浏览器打印预览只是近似模拟，不是最终结果。
