print媒体查询不生效的主因是屏幕样式未被显式重置，需在@media print中覆盖display、color等关键属性；避免!important，优先用具体选择器或重置值；隐藏元素时需同步处理float、position、background等；字体推荐pt单位；分页控制需注意容器限制和表格结构；测试应导出pdf而非仅依赖预览。
print媒体查询不生效？检查是否被屏幕样式覆盖
最常见的情况是：写了 @media print，但打印预览里样式完全没变。根本原因不是语法错，而是 CSS 层叠优先级问题——屏幕样式（比如 display: flex 或 color: #333）没被显式重置，浏览器照常渲染。
- 必须在
@media print块内**显式覆盖关键属性**，不能依赖“没写就默认不显示” - 避免用
!important治标；优先用更具体的 selector 或直接重置（如display: block替代留空） - Chrome 打印预览中按
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac）可快速触发，比真机打印快得多
隐藏非内容元素时，别只靠 display: none
导航栏、广告位、侧边栏这些在打印时确实该消失，但仅用 display: none 可能导致布局塌陷或页眉页脚错位，尤其当它们是 Flex/Grid 容器的子项时。
- 对浮动/定位元素，补充
position: static和float: none，防止脱离文档流影响后续内容排版 - 对背景图、阴影、border 等装饰性样式，一并设为
background: none、box-shadow: none，否则部分打印机可能强行渲染成灰块 - 慎用
visibility: hidden——它保留空间，容易造成空白页或内容被截断
字体与尺寸单位选 em / pt 而非 rem / vw
打印样式表里用 rem 会继承屏幕根字体大小，而不同浏览器/系统对打印上下文的 html 字体计算不一致；vw 更是完全失效，因为打印没有视口概念。
- 正文推荐用
pt（如font-size: 12pt），这是印刷行业标准单位，兼容性最好 - 行高、外边距可用
em，它基于当前元素字体计算，相对稳定 - 绝对单位（
px）在高 DPI 打印机上可能缩放异常，尽量避免
分页控制：break-before/after/inside 不是万能的
page-break-before: always 这类老写法已被废弃，现代应使用 break-before，但它在某些嵌套场景下会被忽略——比如父容器设置了 overflow: hidden 或是 flex 容器。
- 确保目标元素是块级且无强制压缩（如
flex-shrink: 0可能阻止分页） - 表格打印最头疼：给
table加break-inside: avoid，但thead和tbody需分别处理，否则表头可能丢在上一页末尾 - 测试时务必用「另存为 PDF」导出再检查，浏览器内置预览有时不反映真实分页结果
position: sticky 的页眉在打印时卡在中间一页不动——它既没被 display: none 干掉，也没触发任何 break 规则，得手动加 position: static !important 才服帖。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
