@media print 必须显式重置布局、精准隐藏非内容元素、严格测试，否则真机输出易现空白页、错位表格和字体糊化；根本原因包括选择器权重不足、动态加载失效、未重置float/position及未关闭浏览器默认背景屏蔽。
@media print 不是“加了就行”，而是必须显式重置、精准隐藏、严格测试，否则打印预览看着正常，真机输出全是空白页、错位表格和糊掉的字体。
为什么写了 @media print 却没变化
浏览器不会自动降级屏幕样式——哪怕你把 @media print 写在 CSS 文件末尾，只要选择器权重不如屏幕样式（比如 .header 被 body .header 或带 !important 的框架规则覆盖），打印时就照旧渲染。
- 检查 Chrome DevTools → Rendering → Emulate CSS media type → 选
print，看样式是否加载；但注意：分页线不准，仅用于查样式是否生效 - 别依赖
!important治标；优先用更具体的选择器，比如把.nav改成body .nav或.main-content + .nav - 确认
<link rel="stylesheet" media="print">是静态引入在<head>中，而非 JS 动态插入——异步加载的 print 样式大概率被跳过
哪些元素必须手动隐藏，且不能只靠 display: none
导航栏、侧边栏、广告、按钮这些交互控件不参与纸面输出，但浏览器绝不会自动过滤。更麻烦的是：仅设 display: none 可能引发父容器塌陷、flex 换行异常或浮动残留，导致正文错位甚至整页空白。
- 必须同步重置布局属性：
float: none !important、position: static !important、overflow: visible !important - 慎用
visibility: hidden——它保留盒模型空间，打印时照样占行、撑出空白页 - 动态内容（如
.loading、.modal、.toast）也要一并加入隐藏列表，JS 插入的节点不会被默认规则捕获 - Bootstrap 用户注意：
.d-md-none在 print 下无效，得单独写@media print { .d-md-none { display: block !important; } }
字体、单位、分页怎么设才不崩
屏幕用的 rem、%、Web Font 在打印时极易失真：字号缩放不可控，中文字体变方块，背景色被浏览器默认屏蔽，表格跨页断裂。
立即学习“前端免费学习笔记（深入）”；
- 正文字号强制用
pt（如font-size: 12pt），这是印刷标准单位，A4 纸上最稳 - 字体栈降级为系统安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif；禁用@font-face打印时加载 - 关键容器加
break-inside: avoid（如table、.card、h2 + p），防内容被硬切 - 表格必须显式设置
thead { display: table-header-group; }和tfoot { display: table-footer-group; }，否则页眉页脚不随分页重复 - Chrome 默认关闭「背景图形」，即使写了
background: #fff也不显示——测试时务必手动勾选该选项
调试时怎么一眼揪出漏网元素
别靠猜，用视觉标记直击问题。临时加一条 debug 规则，所有未被隐藏的元素都会被红色边框包住，预览里一目了然。
@media print {
* {
outline: 1px solid red !important;
}
}- 这条规则只用于开发阶段，上线前必须删掉——它会干扰真实排版
- 导出 PDF 比看预览更可靠，因为「另存为 PDF」走的是同一套
@media print渲染逻辑 - 真机打印一次比十次预览都管用：某些打印机驱动会二次缩放，A4 尺寸偏差明显，尤其含 SVG 或高 DPI 图片时
- 最常被忽略的是
<iframe>：父页的@media print不会穿透生效，需单独重置其内部样式或提前提取内容
