必须用@media print包裹打印样式，浏览器仅在ctrl+p或window.print()时启用该规则；漏写是80%排版失效主因，需集中定义、避免混杂屏幕样式，并双写page-break-inside与break-inside确保兼容性。
打印样式表必须用 @media print 包裹
浏览器只在触发打印（Ctrl+P 或 window.print()）时才应用 @media print 规则，@media screen 或普通样式不会自动生效。漏写这个媒体查询是 80% 打印排版失效的根源。
常见错误包括：直接在全局 CSS 里写 .header { display: none; } 期望它在打印时隐藏——这不会起作用，除非它被包裹在 @media print 块内。
实操建议：
- 把所有打印专用规则集中放在一个独立的
@media print { ... }块中，避免和屏幕样式混杂 - 不要依赖
!important强行覆盖——优先用更具体的打印选择器，比如@media print { .sidebar { display: none; } } - 开发时可用 Chrome DevTools 的「Rendering」面板勾选
Emulate CSS media type → print实时预览
display: none 在打印时要慎用导航与装饰元素
隐藏非核心内容能显著提升打印可读性，但误删关键信息反而导致纸面空白或断页。例如，隐藏整个 .nav 没问题，但若连 .page-title 或 h1 也一并 display: none，打印出来可能只剩正文段落，缺乏上下文。
更稳妥的做法是分层控制：
- 必保留：
h1,h2, 正文p, 表格table, 有语义的figure和caption - 建议隐藏：
.header-nav,.ads-banner,.social-share,footer .contact-info（联系人电话/地址这类非必要信息） - 需重置而非隐藏：
a[href]应用color: #000; text-decoration: underline;，否则超链接在黑白打印中完全不可见
打印分页控制要用 page-break-inside: avoid 而非 break-inside
现代 CSS 中 break-inside 是标准属性，但 IE11、旧版 Edge 和部分 PDF 打印驱动仍只识别前缀版 page-break-inside。仅写 break-inside: avoid 会导致表格行、卡片组件在打印时被硬生生截断。
兼容写法必须双写：
@media print {
article, table, .card {
page-break-inside: avoid;
break-inside: avoid;
}
}
其他关键分页控制点：
- 强制分页用
page-break-before: always（如每个h2前另起一页），break-before兼容性略差，不建议单独使用 - 避免对
flex或grid容器设page-break——它们内部子项的分页行为不可预测，应改用块级包装元素（如div）包裹后控制 - 含长图或 SVG 的容器建议加
max-height: 100vh; overflow: hidden;，防止图像撑破单页
字体、颜色与单位必须适配黑白打印场景
屏幕上的浅灰文字（如 color: #666）在激光打印机上几乎不可读；CSS 中用 rem 或 em 的字号在某些打印引擎中会缩放异常；背景色（background-color）默认不打印，除非用户手动勾选「背景图形」——这不能依赖。
实操底线配置：
- 统一设
color: #000;和background-color: transparent;，彻底规避色彩渲染差异 - 字号改用绝对单位：
font-size: 12pt;（1pt = 1/72 inch）比1rem更稳定；正文字体推荐serif（如Georgia, serif），印刷可读性优于无衬线 - 禁用
box-shadow、border-radius、transform等纯视觉装饰，它们在多数打印输出中被忽略或引发布局错位
最易被忽略的一点：打印样式表里不要引用 Web Font（如 @import url('https://fonts.googleapis.com/...');）。打印机环境通常无法联网加载，且本地未安装时会回退到系统默认字体，造成排版偏移。直接用安全字体栈更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
