media="print"仅在打印预览或window.print()调用时生效，普通浏览时不加载、不解析、不参与层叠；它不启用打印功能，只指定样式表专供打印上下文使用，且大小写敏感，必须严格写作print。
link 的 media="print" 到底起什么作用
它不触发打印，也不控制打印机，只决定这张样式表是否参与当前媒介的样式计算。写了 media="print"，浏览器在普通浏览时根本不会解析它——DevTools 的 Styles 面板里压根看不到这条规则；只有调用 window.print() 或打开打印预览时，它才被加载、解析、应用。
常见误解是把它当“开关”，以为加了就能让页面可打印。其实打印功能本身由浏览器原生支持，media="print" 只是告诉浏览器：“这张表里的样式，只许在打印上下文中生效”。
- 不要和
media="screen"混用，比如写成media="screen, print"—— 这会让 print.css 在页面加载时就参与屏幕渲染，极可能污染正常布局 - 也不要用
@import在主 CSS 里引入 print 规则，Safari 和部分旧版 Edge 不保证其在打印时执行 - 多个
link标签可以共存，比如同时有screen.css（media="screen"）、print.css（media="print"），互不干扰
为什么 print.css 写了却没效果
90% 是因为 media 属性值写错了：大小写敏感，必须是小写 print，不是 Print、PRINT、prnt，也不是 all print 或 screen, print。
另一个高频原因是缓存：Chrome 和 Edge 的打印预览会缓存 CSS 解析结果，改完 print.css 后，仅刷新页面无效，必须在打印预览窗口里按 Ctrl+Shift+R（Windows）或 Cmd+Shift+R（macOS）强制重载。
- 检查 HTML 中是否漏了引号，比如写成
media=print—— 缺少引号会导致属性值被截断或忽略 - 确认路径正确：
href="print.css"是相对当前 HTML 路径，不是相对于 CSS 文件自身 - 用 DevTools 的 Network 面板过滤
print.css，看它是否在打印预览触发时才发起请求（正常行为）；如果页面一加载就请求，说明media值有问题
打印时颜色/背景为啥全没了，怎么救
不是你写错了，是浏览器故意的：所有主流浏览器默认禁用 background-color、background-image 和非黑色文字色，目的是省墨水。哪怕你在 print.css 里写了 color: #007bff 或 background: #f0f0f0，预览里照样黑字白底。
唯一解法是显式声明颜色强制生效，且三个兼容性属性一个都不能少：
@media print {
* {
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
-
color-adjust是标准属性，Firefox/Chrome 新版支持 -
-webkit-print-color-adjust是 Chrome/Safari 旧前缀，2026 年仍需保留 -
print-color-adjust是新别名，部分新版 Edge 要求它 - 必须用
!important，否则容易被更高优先级的选择器覆盖
display: none 在打印里真的可靠吗
不总是。某些浏览器（尤其是 Safari）对打印上下文中的 display 属性解析不稳定，特别是当目标元素有 inline-style、JS 动态 class 或父容器用了 flex/grid 时，display: none 可能失效或延迟生效。
更稳妥的做法是组合使用：
- 加
visibility: hidden和position: absolute; left: -9999px双保险 - 对导航栏、广告位等固定区域，直接在
print.css里写.header, .ad-banner { display: none !important; }，并确保选择器权重足够高 - 避免依赖 JS 控制打印隐藏逻辑——
window.print()触发后，JS 执行可能被中断或不同步
真正容易被忽略的是单位：打印样式里尽量用 pt、in、cm 这类绝对单位，rem 和 em 在不同打印机 DPI 下表现浮动，可能导致页边距错乱或内容截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
