打印样式不生效主因是@media print被普通样式覆盖或浏览器未触发打印上下文；需将print规则置CSS末尾、用具体选择器、DevTools模拟调试，并统一处理隐藏元素、字体间距及分页。
打印样式为什么经常不生效
核心原因就两个：@media print 规则被普通样式覆盖，或者浏览器没触发打印上下文。CSS 优先级规则照常起作用，display: none 这类声明如果写在通用选择器里（比如 div { display: block; }），又没在 @media print 里显式重置，就会沿用屏幕样式。
常见错误现象：
- 点「打印预览」页面还是彩色、带背景图、有按钮
- 内容被截断或错位，尤其是用了
position: fixed或float - 字体小得看不清，或行高太密导致文字糊在一起
实操建议：
- 把
@media print块放在 CSS 文件末尾，或至少确保它在所有通用样式之后加载 - 避免依赖
!important，改用更具体的选择器，比如用@media print body { ... }而不是@media print * { ... } - 在 Chrome DevTools 的「Rendering」面板中勾选「Emulate CSS media type」→
print，实时调试，比反复点打印预览快得多
哪些元素必须隐藏或重置
导航栏、广告位、表单控件、页脚链接这些对纸质输出毫无意义，还浪费墨水。但不能只靠 display: none —— 某些浏览器（如 Safari）对 display: none 元素内的子元素仍可能计算分页位置，导致空白页。
推荐做法：
- 对非内容区域统一加类名，比如
class="no-print"，然后写@media print .no-print { display: none !important; } -
input、button、select等表单控件默认不打印，但若用了自定义样式（如背景色），需显式设background: transparent; border: none; -
img标签默认会打印，但高清图可能卡顿或耗墨，建议加@media print img { max-width: 100%; height: auto; }并考虑用print-only类控制是否显示
字体、间距和分页怎么调才不糊
屏幕上看很清爽的 font-size: 14px + line-height: 1.4，打出来可能字挤成一团。打印设备的 DPI 和渲染逻辑跟屏幕完全不同，CSS 中的像素单位（px）在打印时会被换算为物理尺寸，但换算系数因浏览器而异。
关键参数建议：
- 正文用
font-size: 12pt（1pt = 1/72 inch）比16px更可靠；标题可用14pt～18pt -
line-height: 1.5或1.6起步，避免文字粘连 - 用
page-break-inside: avoid;防止表格或段落被硬生生劈开；对长列表，加page-break-after: always;控制翻页位置 - 禁用
box-shadow、text-shadow、border-radius，它们在多数打印机上不渲染或渲染异常
完整可直接用的最小打印样式代码
@media print {
* {
box-shadow: none !important;
text-shadow: none !important;
background: transparent !important;
}
body {
font-size: 12pt;
line-height: 1.6;
color: #000;
margin: 0;
}
a {
color: #000;
text-decoration: none;
}
img {
max-width: 100% !important;
height: auto !important;
}
.no-print,
nav,
header,
footer,
aside,
.ads,
.btn {
display: none !important;
}
table {
page-break-inside: avoid;
}
}
这段代码没用任何框架或魔法值，只处理最常踩的坑：背景、阴影、字体大小、链接样式、图片缩放、无关区块隐藏、表格分页。实际项目中，.no-print 类要提前约定好并贯穿 HTML 结构。
真正麻烦的是动态内容 —— 比如 React 渲染的组件里没加 no-print，或者通过 JS 插入的弹窗 DOM 没被 @media print 覆盖到。这种时候得配合 JS 在 beforeprint 事件里临时加类，而不是只靠纯 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
