要让打印样式生效，需用更具体选择器提升特异性、避免与屏幕样式冲突，优先单独引入print.css，并用pt/cm单位、禁用背景依赖、手动验证分页效果。
怎么让打印样式真正生效，而不是被屏幕样式覆盖？
根本原因是 @media print 规则本身不自带更高优先级，它和 @media screen 或无媒体查询的规则处于同一权重层级。哪怕写在 CSS 文件末尾，只要选择器一样，屏幕样式照样赢。
解决办法不是堆 !important（它在部分打印机驱动里会被忽略），而是提权：
- 用更具体的选择器：比如把
.header改成@media print body .header，靠多一层祖先提升特异性 - 避免用类名直接复用：屏幕用
.nav，打印时可加个.print-nav专用于隐藏逻辑 - 检查是否误把打印样式写在了
@media screen块里，或漏写了@media print包裹——这是最常被忽略的硬性前提
为什么用 link rel="stylesheet" media="print" 比写在主 CSS 里更可靠？
把打印样式塞进主 CSS 文件，容易被其他规则干扰，尤其当项目用了 CSS-in-JS、Tailwind 或 PostCSS 等工具链时，@media print 块可能被拆、被删、被压缩错位。
单独引入更可控：
-
<link rel="stylesheet" href="print.css" media="print">—— 浏览器明确知道这条只走打印通道，不参与屏幕渲染流程 - 构建时可对
print.css单独做最小化、去注释、甚至内联（如果体积小），避免额外 HTTP 请求 - 调试时一眼就能定位问题来源：打开 DevTools → Network → 切到 Print 媒体类型，看它是否加载成功
哪些 CSS 属性在打印时会“失效”或行为异常？
不是所有屏幕能用的，在打印时都照常工作。几个高频踩坑点：
-
background-color和background-image默认不打印（Chrome/Firefox 均如此），必须手动勾选「打印背景图形」；稳妥做法是用border或color替代视觉强调 -
flex和grid布局在旧版打印引擎（如某些 Electron 或 PDF 导出服务）中解析不稳定，建议打印结构回归block+float或纯流式布局 -
rem/em在不同 DPI 打印机上缩放不可控，优先用pt（12pt ≈ 16px 屏幕字号）或cm这类物理单位 -
:hover、:focus等交互伪类在打印时恒为 false，a:hover { display: none }会导致链接彻底消失，必须显式控制
怎么验证分页逻辑真的按预期工作？
DevTools 的「Emulate CSS media type → print」只能看样式是否加载，**完全不能反映真实分页效果**。很多断裂、空白页、跨页表格的问题，只有真机打印或导出 PDF 才暴露。
实操建议：
- 在
print.css开头加临时 debug 规则：@media print { * { outline: 1px solid red !important; } }，一眼看出哪些元素还参与布局 - 关键容器强制防断：
@media print .card, table { page-break-inside: avoid; } - 标题后加防孤行：
@media print h1 { break-after: avoid; }（注意：用page-break-after: avoid兼容性更好） - 务必在 Chrome / Firefox / Edge 三端分别打印预览，再挑一台真实激光打印机试打一次——驱动差异比浏览器更大
最耗时间的从来不是写代码，而是反复调 page-break 和等打印机吐纸。不同纸张尺寸设置、缩放比例、甚至装纸方向，都会让预览和实打效果差一截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
