media="print"是唯一可靠且浏览器原生支持的打印样式加载机制，必须严格小写、加英文双引号，仅在打印预览或window.print()时加载解析；其他方式如@import或混入主css的@media print存在兼容性差、调试难、污染样式等问题。
media="print" 是唯一可靠、浏览器原生支持的打印样式加载机制，其他方式（如 @import、@media print 块混在主 CSS 里）要么兼容性差，要么调试困难、易污染正常样式。
link 标签的 media="print" 必须严格写对
它不是“可有可无”的提示，而是浏览器决定是否加载、解析、应用该 CSS 的开关。写错就等于没写：
-
media值必须是小写print，不能是Print、PRINT、prnt或all print - 属性值必须用英文双引号包裹：
media="print"，不能写成media=print（缺引号会导致解析失败） - 不要和
screen混用：media="screen, print"会让浏览器在页面加载时就拉取并解析print.css，可能干扰屏幕样式、增加首屏开销 - 路径是相对于当前 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刷新整个预览页
print.css 里该写什么、不该写什么
目标不是“让网页看起来像打印稿”，而是“印出来能读、省纸、不糊墨”。浏览器默认会压制背景、图片、非黑文字色，你得主动覆盖：
- 必须加全局重置：
@media print { * { color-adjust: exact !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }，三者缺一不可 - 隐藏无关区块用
visibility: hidden; position: absolute; left: -9999px;，比display: none更稳妥（某些 PDF 打印驱动会跳过display: none的整块内容） - 链接必须显式标注 URL：
a[href]::after { content: " (" attr(href) ")"; }，否则印出来就是死文本 - 慎用
@page：Firefox 支持margin和size，Chrome 仅第一页生效；分页建议优先用page-break-before: always（兼容性比break-before: page更好） - 字体单位推荐用
pt（如font-size: 12pt），避免rem/em在不同打印上下文中缩放失真
真正容易被忽略的是：打印样式不是“加点规则就行”，而是一套独立渲染上下文——它不参与屏幕层叠、不响应 JS 动态类、不继承主 CSS 的变量或作用域。调试必须进打印预览，靠模拟器只能看布局，关键的分页、页边距、颜色还原，只有真打出来或导出 PDF 才算数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
