media="print"是浏览器加载打印样式表的硬开关，必须小写、加英文双引号，仅在打印预览或window.print()时请求解析；写错即不入场，普通浏览时styles面板不可见，调试须进打印预览强制重载并查network请求时机。
media="print" 是浏览器加载打印样式表的硬开关
不加 media="print"，浏览器根本不会把那个 CSS 文件拉进打印渲染流程——它被当成普通样式表，在打印预览里压根不存在。这不是“没生效”，而是“没入场”。media="print" 不是提示，是准入凭证：只有它存在且拼写完全正确（小写、带英文双引号），浏览器才会在调用 window.print() 或打开打印预览时，才去请求、解析、应用该文件。
为什么写错 media 值就彻底失效
常见拼写错误直接导致加载跳过：
-
media="Print"或media="PRINT"：大小写敏感，必须全小写print -
media=print（缺引号）：HTML 属性值未包裹，解析失败，等同于没写 -
media="screen, print"：浏览器会在页面加载时就拉取并解析该 CSS，可能干扰屏幕样式、增加首屏开销，且违背“按需加载”原则 -
media="all print"或media="prnt"：非法值，被忽略
为什么改了 print.css 在 DevTools 里看不到变化
这是正常现象，不是 bug：
- 普通浏览状态下，
Styles面板里永远看不到print.css的任何规则——它根本不参与当前渲染 - 真正调试入口在打印预览中：Chrome / Edge → 打开打印预览 → 右键 → “检查” →
Computed面板左上角切换为print媒体 - Network 面板过滤
print.css：如果页面一加载就发起请求，说明media值写错了；正确行为是仅在触发打印时才请求 - 缓存顽固：Chrome / Edge 打印预览缓存 CSS 解析结果，仅刷新页面无效，必须在预览窗口中按
Ctrl+Shift+R（Windows）或Cmd+Shift+R（macOS）强制重载
独立 print.css 比 @media print 块更可靠
两者都能用，但适用场景不同：
- 用
@media print { ... }写在主 CSS 里，适合简单覆盖（比如隐藏导航栏、重置字体颜色），但容易被其他规则覆盖，也污染开发环境 - 用
<link rel="stylesheet" href="print.css" media="print">引入独立文件，才是生产环境首选：构建工具不会误合并、团队协作边界清晰、调试隔离、避免@import兼容性问题 - 注意：
print.css文件内部**不要**再套一层@media print { ... }—— 整个文件就是为打印服务的，重复包裹反而增加出错概率 - 框架（如 Bootstrap）自带的打印重置规则可能覆盖你的设置，务必在打印预览的
Computed面板里确认最终生效值
:hover，不计算 display: none 元素的分页位置，连单位换算（rem、%）都不可控——media="print" 不只是“加个属性”，它是进入这个上下文的第一道门禁。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
