media="print"是唯一可靠且浏览器原生支持的打印样式加载机制;它必须严格小写、加英文双引号,仅在打印预览或window.print()时加载解析,写错即失效,普通浏览时完全不参与渲染。

media="print" 是唯一可靠、浏览器原生支持的机制,其他方式(比如 @import、混在主 CSS 里的 @media print 块)要么加载时机不可控,要么调试困难、容易污染屏幕样式。
link 标签的 media="print" 必须写对
这不是“提示”,而是浏览器决定是否加载该 CSS 的硬开关:
• media 值必须是小写 print,不能是 Print、PRINT、prnt 或 all print
• 属性值必须用英文双引号包裹:media="print",写成 media=print(缺引号)会导致解析失败
• 不要和 screen 混用:media="screen, print" 会让浏览器在页面加载时就拉取并解析 print.css,可能干扰正常渲染、增加首屏开销
• href 路径是相对于当前 HTML 文件的,比如 href="css/print.css",不是相对于 CSS 文件自身
为什么改了 print.css 却看不到效果
90% 的“没生效”问题出在加载时机或缓存上,而不是 CSS 写得不对:
• 普通浏览状态下,DevTools 的 Styles 面板里根本看不到 print.css 的任何规则——这是正常行为,不代表它坏了
• Chrome / Edge 的打印预览会缓存 CSS 解析结果;仅刷新页面无效,必须在打印预览窗口中按 Ctrl+Shift+R(Windows)或 Cmd+Shift+R(macOS)强制重载
• 用 Network 面板过滤 print.css:如果页面一加载就发起请求,说明 media 属性值写错了;正确行为是只在打开打印预览或调用 window.print() 时才触发请求
• Safari 有时会卡住旧规则,可尝试在打印预览窗口中直接按 Cmd+R 刷新整个预览页
@media print 和 link[media="print"] 怎么选
两者都能用,但适用场景不同:
• 如果打印样式简单、逻辑少,直接在现有 CSS 文件里加 @media print { ... } 最省事,无需额外 HTTP 请求
• 如果打印样式复杂、需团队协作、或要彻底隔离(比如避免任何屏幕样式泄漏),用 <link rel="stylesheet" href="print.css" media="print"> 更可控
• 不推荐把整套 CSS 复制进 @media print 块——体积翻倍、权重易冲突、维护成本高
• @page 规则只能在 @media print 块内生效,且不能嵌套选择器,也不能写在 link[media="print"] 引入的文件之外
:hover、:focus、:active)在打印时自动失效,display: none 的元素不会参与分页计算,而 @page 和 break-inside: avoid 这类分页控制必须配合具体容器(比如 <tr>)才有效。



















