media="print"仅在打印预览或window.print()调用时生效，普通浏览时不加载不解析；print.css应精简内容、重置背景/颜色/下划线，隐藏无关区块，强化链接url标注，慎用display:none，注意chrome与firefox在@page和分页上的兼容差异。
link标签里media="print"到底什么时候生效
只有在浏览器触发打印预览（Ctrl+P / Cmd+P）或调用 window.print() 时，media="print" 的样式表才会被应用；普通浏览时完全不加载、不解析、不参与层叠。这不是“切换模式”，而是独立的渲染上下文。
常见误操作：<link rel="stylesheet" href="print.css" media="print"> 写对了，但开发者工具里始终看不到效果——因为没进打印预览界面。别在普通页面上调试它。
print.css里该删什么、该留什么
打印样式的目标不是“看起来像网页”，而是“印出来能读、省纸、不浪费墨”。浏览器默认会把背景色、图片、非文本元素（如 button、input）设为不可见，但你得主动覆盖干扰项。
- 必须重置：
background、color（深色文字配白底）、text-decoration（去掉链接下划线，改用括号标注 URL） - 建议隐藏：
nav、aside、.ad-banner、.share-buttons等与内容无关的区块 - 需要强化：
a[href]后加::after { content: " (" attr(href) ")"; }，否则链接变死文本 - 慎用
display: none：某些 PDF 打印驱动（如 Chrome 默认）会跳过整块内容，改用visibility: hidden; position: absolute; left: -9999px;更稳妥
Chrome/Firefox 对 print 媒体查询的实际兼容差异
Firefox 会尊重 @page 规则里的 margin 和 size（比如 @page { size: A4; margin: 1cm; }），而 Chrome 仅部分支持——尤其 margin 在多页文档中可能被忽略。实际测试发现：
-
@page中的margin在 Chrome 里只影响第一页，后续页仍走默认边距 -
break-before: page在 Firefox 中稳定生效，在 Chrome 中需配合page-break-before: always（旧语法）才可靠 - 不要依赖
font-smoothing或-webkit-print-color-adjust：Chrome 89+ 已废弃后者，统一用print-color-adjust: exact（支持度尚可）
调试 print 样式最有效的三步法
别靠猜。打开打印预览后，开发者工具里选中“Rendering”标签页（Chrome），勾选 Emulate CSS media: print，就能实时看到效果。但要注意：
- 这个模拟器不会触发
@page规则，所以页边距、分页行为得真打出来看 PDF - 右键打印预览中的任意元素 → “检查”，能直接定位到对应 DOM 和生效的 print 样式
- 如果某段文字印出来是灰色而不是黑色，大概率是继承了父级
color: #666且没在 print.css 里重写——打印时color默认不继承 body 的黑，要显式声明
最常被忽略的一点：打印样式表里不要写 width: 100% 或 max-width: 1200px。纸张宽度固定（A4 是 210mm），用 width: 100% 反而可能导致内容被截断。该用 width: auto 或基于 em/rem 的弹性字号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
