@media print 样式需包裹在媒体查询内且仅打印时生效，常见失效原因包括未嵌套、link漏media="print"、调试误信devtools模拟；应集中管理、重置样式、慎用display:none、优先用pt单位、正确使用@page和table-header-group等打印专属规则。
直接写 @media print 就能生效，但 80% 的打印样式失效，是因为没搞清它只在打印触发时才运行，且必须独立隔离、精准控制。
为什么 @media print 写了却没效果？
最常见原因是：样式没被包裹在 @media print 块里，而是直接写在全局 CSS 中。比如写 .sidebar { display: none; }，期望它在打印时隐藏——浏览器根本不会理，除非它出现在 @media print { .sidebar { display: none; } } 里面。
另一个高频错误是误用 link 标签引入打印样式表时漏掉 media="print" 属性。写成 <link rel="stylesheet" href="print.css"> 或 media="all"，会导致该 CSS 在页面加载时就参与渲染，不仅可能拖慢首屏，还完全不参与打印逻辑。
开发调试时也容易踩坑：Chrome DevTools 的「Rendering」面板勾选 Emulate CSS media type → print 可实时预览，但这个模拟只影响样式计算，不触发真实分页或 @page 规则，别把它当最终结果。
怎么组织打印样式才能避免冲突和覆盖？
推荐把所有打印专用规则集中在一个 @media print 块中，不要拆散到多个文件或分散在主 CSS 各处。这样便于维护，也避免层叠优先级混乱。
关键原则是「重置而非覆盖」：
- 用
color: #000和text-decoration: underline替换链接默认样式，否则黑白打印里a[href]会彻底隐形 - 对表格标题行
thead设置display: table-header-group，确保跨页时自动重复显示 - 慎用
display: none：隐藏.header-nav没问题，但连h1或.page-title一起干掉，打印出来就是一段没标题的正文 - 字体单位优先用
pt（如font-size: 12pt），比px更符合打印物理尺寸预期
@page 规则和横向打印怎么配？
@page 是打印样式里最常被忽略的底层控制项，它不作用于元素，而是定义纸张本身的行为。漏写它，就等于放弃对页边距、尺寸、方向的主动权。
基础写法：
@media print {
@page {
size: A4;
margin: 2cm;
}
@page landscape {
size: A4 landscape;
}
.landscape-content {
page: landscape;
}
}
注意点：
-
@page必须嵌套在@media print内，单独写无效 -
size: A4 landscape和@page landscape是两回事：前者是声明纸张尺寸，后者是定义一个名为landscape的页面类型，需配合元素上的page属性使用 -
@top-center、@bottom-right这类页眉页脚规则，只在@page块内有效，且内容必须用content属性指定，不能用 HTML 元素插入
响应式表格在打印时怎么不被截断？
网页表格一进打印预览就横向溢出、内容被切掉，根本原因是浏览器默认按屏幕宽度渲染，而打印引擎对 table 的弹性处理极弱。
实操解法不是靠媒体查询改 width，而是用打印专属行为重置：
- 给长表格加类名
.large-table，设font-size: 10pt缩小文字密度 - 强制
thead和tfoot在每页顶部/底部重现：thead { display: table-header-group; }、tfoot { display: table-footer-group; } - 禁用固定列宽：
.table-column { width: auto !important; }，让浏览器按内容重算列宽（!important在这里必要，因为表格原生width权重太高） - 如果表格实在过宽，与其强行压缩，不如用
transform: scale(0.85)整体缩放容器——这招比 JS 截图更可靠，且保留文本可选性
真正难的不是写对规则，而是记住：打印样式不是“屏幕样式的缩小版”，它是另一套渲染上下文。从 @page 到 display: table-header-group，每个特性都只在打印流程中起效，脱离这个环境就毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
