@media print 样式仅在真实打印（Ctrl+P 或 window.print()）时生效，须独立包裹、集中书写；需重置样式、双写分页属性、嵌套@page规则，并优先保留语义化内容。
直接用 @media print 包裹样式就能生效，但多数人写完发现没反应，核心问题不是语法错，而是没理解它只在真实打印触发时才运行，且必须独立、精准、结构清晰。
必须用 @media print 包裹，不能混在普通样式里
浏览器只在 Ctrl+P 或 window.print() 时启用这些规则。如果写成：
.header { display: none; } —— 这条全局样式对打印完全无效。
正确写法是全部收进一个媒体查询块里：
✅ 正确写法
@media print {<br> .header, .nav, .ads { display: none; }<br> body { color: #000; background: #fff; }<br>}
所有打印专用规则建议集中在一个 @media print 块中，避免分散或跨文件，防止层叠冲突和维护困难。
关键排版控制：重置 + 分页 + 纸张设置
打印不是“缩放屏幕”，而是重新组织内容适配物理纸张，三类规则缺一不可：
-
重置基础样式：禁用背景色/图（
background: transparent !important），链接加下划线和 URL（a::after { content: " (" attr(href) ")"; }），字体统一为衬线体（如font-family: "Times New Roman", serif;） -
分页控制要双写：现代属性
break-inside: avoid和旧版page-break-inside: avoid必须同时出现，尤其对表格、卡片、文章段落，否则 IE 或 PDF 打印驱动会截断内容 -
@page 规则必须嵌套：它定义纸张本身，不能单独写。例如设置 A4 横向：
@media print {<br> @page { size: A4 landscape; margin: 1.5cm; }<br> .report-page { page: auto; }<br>}
慎隐藏、巧保留：内容优先级要明确
不是所有视觉上“不重要”的元素都该删。打印丢失上下文比多一页更糟糕：
-
必留：h1/h2 标题、正文
p、语义化table、带 caption 的figure - 建议隐藏：.social-share、.footer、.contact-info（电话地址类非必要信息）、装饰性图标和 SVG
-
需重置而非删除：导航栏可
display: none，但页面主标题.page-title一定要保留；图片若为关键图表，加max-width: 100%; height: auto;，别直接隐藏
调试与兼容要点
Chrome DevTools 的「Emulate CSS media type → print」能预览样式计算，但不模拟真实分页、@page 或跨页重复表头——仅作初步检查。
- 实际测试务必用 Ctrl+P 查看完整打印预览，注意页边距、断页位置、是否多出空白页
- 引入外部打印样式表时，
标签必须带media="print"，漏写会导致样式提前加载且不参与打印逻辑 - 字号推荐用
pt单位（如font-size: 12pt），比px更贴近物理打印尺寸；正文字号不建议小于 11pt - 对含长表格或横向内容的容器，加
overflow-x: hidden !important和max-width: 100vh，防止撑破单页
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
