@media print 规则被浏览器打印渲染通道忽略，因其与屏幕样式完全隔离，未显式声明在该媒体查询内的样式一律无效；必须手动重置关键属性、禁用flex等不支持特性，并为tailwind启用print变体。
@media print 规则被忽略，不是语法错了，而是浏览器压根没执行它——打印渲染通道和屏幕完全隔离，未显式声明在 @media print 块内的任何样式，一律无效。
为什么写在普通 CSS 里的样式在打印预览里“消失”
浏览器对打印使用独立的样式解析流程，只加载并应用明确写在 @media print 作用域内的规则。哪怕你用了 hidden、flex、bg-white 这类工具类，只要它们没包裹在 @media print 里，就等于没写。这不是兼容性问题，是规范行为。
-
@media all不等于“所有场景都生效”，它只是声明适用媒体类型，但打印引擎仍跳过未标记print的规则 - Tailwind 默认不将任何工具类注入
@media print，包括print:hidden—— 它只是个普通类名，没上下文就无意义 - Chrome 打印预览（
Ctrl+Shift+P）是真实测试环境，比真机打印快且可复现，别依赖“看起来差不多”
为什么 @media print 写了却没效果
最常见原因是层叠优先级失效：屏幕样式（比如 display: flex 或 color: #333）没被显式重置，浏览器照常渲染旧值。打印时不会自动“清空”屏幕样式，必须手动覆盖。
- 不要依赖“没写就是默认值”，
@media print中必须显式写出display: block、color: #000等关键属性 - 避免滥用
!important，优先用更具体的选择器，例如把.header改成body .header提升特异性 - CSS 文件中
@media print块应尽量放在末尾，防止被后续同级规则覆盖 - 检查是否误写为
@mediaprint（少空格），这是常见拼写错误，会导致整个块被忽略
Flex 布局在打印预览中塌陷怎么办
Chrome 和 Edge 在打印时主动禁用 display: flex，这不是 bug，是降级策略。你不能“修复 Flex”，只能在 @media print 中用传统布局接管。
- 对所有 Flex 容器，显式设
display: block或display: table，而非留空 - 横向排列需求（如三列卡片）改用
display: inline-block+ 宽度控制，比float更稳定 - 移除
flex-grow、align-items、vh单位等打印不识别的属性 - 伪元素（如
::before分隔线）需单独设display: none，否则可能残留空白或错位
Tailwind 用户必须配置 print: 变体
Tailwind v3.0+ 支持 print: 前缀，但默认关闭。不配置，print:hidden 就只是个没生成 CSS 的字符串。
- 检查
tailwind.config.js中variants或plugins是否启用print（v3.3+ 使用corePlugins.print = true） -
content配置必须覆盖到使用print:类的文件，否则类不会被扫描生成 - 背景色在打印中默认不显示，用
border或text替代视觉区分，或加-webkit-print-color-adjust: exact - IE11 是特例：它对内联
@media print支持差，建议用独立<link rel="stylesheet" media="print">引入
真正难的不是写对 @media print，而是意识到：打印不是“屏幕样式的简化版”，而是一套需要重新设计的盒模型逻辑。每个 display: flex、每个 position: fixed、每个 Web 字体图标，都得在打印上下文中被亲手重写一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
