@media print可直接捕获打印预览或ctrl+p触发的打印上下文，无需判断设备类型；需显式重置background、display、float等属性，用page-break-*控制分页，并通过打印预览而非devtools调试。
如何用@media print匹配打印场景
直接写 @media print 就能捕获浏览器“打印预览”或“Ctrl+P”触发的打印上下文，不需要额外判断设备类型或用户代理。它和 @media screen 是并列的媒体类型，不是子集。
打印样式里哪些CSS属性最常被重置
浏览器默认会忽略很多屏幕样式（比如背景色、浮动、动画），但不能依赖它——必须显式控制。常见需覆盖的点：
-
background和background-color默认不打印，如需打印需设为!important或改用color模拟 -
display: none会隐藏内容，但visibility: hidden不会阻止打印，慎用 -
float在打印流中基本失效，建议用display: block+page-break-inside: avoid控制分页 -
font-size在打印时可能因缩放失真，推荐用pt或cm等绝对单位保真
避免打印时内容被意外截断
分页是打印样式最易出问题的环节。浏览器按物理页面尺寸自动折行，但常把标题和正文拆到两页。
- 用
page-break-before: always强制新页起始（注意：对 flex/grid 容器子项可能无效） -
page-break-inside: avoid对块级元素较可靠，但对表格行（tr）支持差，建议整个table加该声明 - Chrome 和 Firefox 对
break-before/break-after（新标准）支持更好，可搭配@supports渐进增强 - 避免在
position: fixed元素上设打印样式——它在打印输出中行为不一致，多数浏览器直接丢弃
调试打印样式比想象中更难
不能靠刷新页面看效果，必须进打印预览界面（Ctrl+P / Cmd+P）才能真实触发 @media print。DevTools 的“Rendering”面板虽有 media 模拟开关，但它只模拟 viewport，不模拟打印引擎的分页逻辑。
- 修改后务必点“打印预览”，不要只看 DevTools 中的样式计算结果
- Firefox 的打印预览最接近真实输出；Chrome 有时会错误合并相邻页边距
- 如果内容始终不出现，检查是否被父级
display: none或opacity: 0间接影响——打印时opacity无效，但display仍生效
真正麻烦的不是写规则，而是不同浏览器对分页断点、字体嵌入、SVG 渲染的处理差异——得逐个预览验证，没法一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
