@media print 必须单独用引入，置于所有屏幕样式之后，不可嵌套或混用，iframe需单独定义，调试须用真实打印预览。
不单独引入或不写在最终渲染位置的 @media print，基本等于没写。 浏览器对打印样式的解析极依赖加载顺序和作用域，写错位置、混在屏幕样式里、或被 iframe 隔离，都会导致规则完全失效。
print 样式必须用 <link rel="stylesheet" media="print"> 单独引入
这是最稳妥的方式，比内联 @media print 更早介入渲染流程，且天然隔离于屏幕样式表，避免被 .container { width: 1200px; } 这类通用规则覆盖。
- 路径必须可访问：HTTP 协议会静默失败，必须是 HTTPS 或本地 file://（开发时）
- 不要用
@import加载它——@import的样式优先级低于外链，且可能延迟解析 - 如果页面含多个子模块，每个模块的打印逻辑应合并进同一份
print.css，而非分散加载
内联 @media print 必须放在所有屏幕样式之后
很多人把 @media print 塞在 <style></style> 块末尾，却忘了前面还有 bootstrap.css 或 main.css 的 link 标签——这些外部样式表里的规则依然会覆盖你写的打印样式。
- 确保
<style></style>标签位于所有<link rel="stylesheet">之后 - 不能嵌套：比如写在
@media screen and (min-width: 768px) { ... @media print { ... } }里，浏览器直接忽略 - 避免用
!important滥用——它能压住部分冲突，但掩盖了结构问题，后期维护极易翻车
iframe 内容的打印样式必须单独定义
父页面的 @media print 不会穿透到 iframe 内部。你在主页面写了再完美的打印规则，iframe 里的报表、图表、嵌入文档照样乱成一团。
- 要么把打印样式内联进 iframe 的
里（<style>@media print { ... }</style>） - 要么在生成 iframe 内容时，动态注入
<link rel="stylesheet" media="print" href="..."> - 更现实的做法：避免在可打印页面中嵌套 iframe，改用 AJAX 提取内容后直接渲染到主 DOM
调试时必须用真实打印预览，别信开发者工具的模拟
Chrome/Safari 的「Emulate CSS media type → print」只能验证 display: none 或 font-size: 12pt 是否生效，但分页、thead 是否重复、@page 尺寸、表格跨页断裂等核心行为，全得靠 Ctrl+P 打开的打印预览才能暴露。
- 在线工具（CodePen/JSFiddle）里写的
@media print几乎无效——它们默认用 iframe 渲染结果，而父级样式不穿透 - 预览里看到空白页？先检查
body是否被设为display: none，再查print.css是否 404 - 表格只显示半行？不是 JS 问题，是
tr缺少page-break-inside: avoid或未声明thead { display: table-header-group; }
真正容易被忽略的点是：打印样式不是“写完就能用”，而是必须和 window.print() 触发时机、DOM 状态、iframe 边界、甚至打印机固件行为耦合验证。跳过打印预览这步，等于把问题留到墨盒耗尽之后才发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
