@media print 是唯一有效触发打印样式的机制，需用更具体选择器、避免 screen/print 混写、禁用 !important、开启打印背景图形，并通过 .no-print 或 data-print="true" 控制显隐；字体用 pt 和系统安全字体，关键容器加 page-break-inside: avoid，链接显示 url，@page 必须平级声明且设置 size/margin，thead 需设 display: table-header-group。
@media print 是唯一能真正触发浏览器打印样式上下文的机制，其他任何 class 切换、JS 注入或 iframe 模拟都无效。
为什么写了 @media print 却没反应
不是语法错，而是它被屏幕样式覆盖了——@media print 不自动提升选择器权重。哪怕你写在 CSS 文件末尾，只要选择器一样，.header { display: block; } 这种无媒体查询的规则仍会赢。
- 用更具体的选择器：
body .header或div#app .header，别只写.header - 别把
@media screen和@media print混在一个文件里，旧版 Safari 会解析失败 - 禁用
!important去压屏幕样式：某些打印引擎会忽略它，反而让后续调试失焦 - 检查 Chrome 打印设置里是否勾选了「打印背景图形」——默认关闭，
background-color再写也白搭
怎么隐藏非内容元素才真正生效
导航栏、广告位、按钮、加载提示这些不会自动“知道”自己不该上纸。不声明，它们就照常渲染，轻则挤占正文，重则生成空白页。
- 统一加
class="no-print"，然后写@media print { .no-print { display: none !important; } } - 别用
visibility: hidden：它保留盒模型空间，可能让段落错位、分页线偏移 - iframe 不继承父页的
@media print，得单独处理其内容，或提前提取 DOM - 推荐改用
data-print="true"标记目标区域：@media print { * { display: none; } [data-print="true"] { display: block; } }，避免和 Ant Design、Bootstrap 的no-print类冲突
字体、单位、分页这三处最容易崩
表格跨页、图片溢出、标题孤行，全是分页逻辑没对齐的表现。
- 字号强制用
pt：font-size: 12pt（≈16px），标题用14pt或16pt，禁用%、em、rem - 字体栈用系统安全字体：
font-family: "Microsoft YaHei", SimSun, serif;，禁用 Web Font - 关键容器加
page-break-inside: avoid：table、.section、.card这类块级结构必须加 - 链接要暴露 URL：
a[href]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }，否则纸上只剩“查看详情”这种废文本
@page 必须和 @media print 平级，不能嵌套
@media print { body { margin: 10mm; } } 是不够的——这个 margin 作用于内容区域，不是纸张本身。真正控制物理纸张尺寸、边距、方向的是 @page。
- 正确写法：
@page { size: A4; margin: 15mm; } -
@page :first { margin-top: 25mm; }可单独控制首页页眉空间（如加标题） - 别在
@media print里写@page，语法非法，整块会被忽略 - 旧版 IE11 不支持
@page全部属性，但size和margin兼容性最好
最易被忽略的是：表格的 thead 默认不会跨页重复，tr 的 page-break-inside: avoid 在 flex/grid 容器里基本失效，而 display: table-header-group 这一行代码，往往就是表格能不能完整打印的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
