@media print 是打印功能可用的前提，缺失则网页无法正常打印；失效主因是选择器权重不足、加载位置错误或浏览器预览机制差异，需在真实打印预览中验证。
直接结论： @media print 不是“锦上添花”，而是打印功能可用的前提——没它，网页基本没法正常打印；写了但没生效，大概率是选择器权重、加载位置或浏览器预览机制出了问题。
为什么 @media print 规则总不生效
不是语法错，而是触发和覆盖逻辑被忽略：
- 规则必须写在
<style></style>块里或外部 CSS 文件中，<style media="print"></style>才有效；内联style=""属性里的样式永远不进打印上下文 - Chrome DevTools 的 “Emulate CSS media type” 只改渲染 viewport，不跑真实分页引擎，预览不准；每次改完必须手动点 Ctrl+P / Cmd+P 进入真实打印预览验证
- Bootstrap、Tailwind 或 React Styled Components 等框架可能屏蔽全局
@media print：CSS-in-JS 默认不注入媒体查询，Shadow DOM 会隔离样式，需显式配置或改用Global注入 - 选择器权重不够：比如你写
.navbar { display: none; }，但框架用了header .navbar.navbar-light+!important，你的规则就被压垮了——得加更具体的选择器或!important
表格被截断、跨页空白多怎么办
表格是最常出问题的元素，根源是浏览器对 <tr> 和 <code><thead> 的分页支持极差。
<ul><li>
<code>page-break-inside: avoid 必须加在 <table> 上，不是 <code><tr> ——后者在多数浏览器中完全无效
<li>避免给 <code><thead> 设 <code>display: table-header-group：部分浏览器（尤其是 Safari）在打印时根本不识别该值，反而导致表头丢失
page-break-before: always 插一个空 <div class="page-break"></div> 强制另起一页，比靠 JS 拆表更稳定table { border-collapse: collapse !important; } 和 th, td { border: 1px solid #000 !important; }，否则默认边框可能不打印背景色、图片、链接 URL 怎么强制显示
浏览器默认省墨策略会主动丢弃 background-color、border、background-image 和超链接地址——这不是 bug，是规范行为。
- 要打印背景色，必须同时写两行：
background: #fff !important;+-webkit-print-color-adjust: exact;+color-adjust: exact; - 装饰性图片一律
display: none !important;；关键图表保留，但加max-width: 100% !important; height: auto !important;防溢出 - 想让链接显示 URL？用
a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666 !important; }，注意attr()在打印上下文中支持良好，但不要用伪元素包裹整个链接块 - 深色模式页面务必重置：
body { background: #fff !important; color: #000 !important; }，否则整页灰黑
横向打印、页边距、首尾页特殊处理
@page 只管“纸”，不管“内容”——它不能嵌套选择器，也不能写 @page h1 这种东西。
- 强制横向：
@media print { @page { size: landscape; } }，注意不是size: A4 landscape，顺序错就失效 - 页边距建议用
@page { margin: 1.5cm; }，比在body上设padding更可靠；如需首尾页不同，用@page :first { margin-top: 3cm; }和@page :last { margin-bottom: 2.5cm; } - 慎用
@page { size: A4; }：某些打印机驱动会忽略它，改用系统默认纸张；真要锁定尺寸，得在打印对话框里手动选 A4，CSS 只作辅助 - 避免在
@page里写任何字体、颜色、布局相关声明——这些全归@media print管，混用会导致规则被浏览器静默丢弃
最易被忽略的点：打印样式不是“写完就跑”，它高度依赖浏览器真实分页引擎。Firefox 预览最准，Chrome 经常合并页边距、误判 break-inside，Safari 对 flex 容器打印支持极弱。上线前，至少用三台设备（Windows Chrome、macOS Firefox、iOS Safari）各打一遍 PDF 再确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
