@media print是唯一可靠、广泛支持的打印样式控制入口，它仅优化内容在打印预览和输出中的呈现，不控制物理纸张边距或打印机设置；@page因浏览器支持极不稳定而仅能作辅助手段。
@media print 是唯一可靠、广泛支持的打印样式控制入口。它不控制物理纸张边距，也不改变打印机设置，只负责让页面内容在打印预览和输出时更清晰、更合理。
为什么 @page 通常不起作用
浏览器对 @page 的支持极不稳定：Chrome 和 Edge 在“默认边距”下可能读取 margin: 2cm，但一旦用户在打印对话框里选了“最小边距”或“无边距”，整个 @page 规则就被忽略；Firefox 对 @page :first 或 @page :left 的支持也常被禁用或绕过。真实场景中，@page 只能作为辅助手段，不能当作主要控制逻辑。
@media print 必须写的几条规则
这几条不是可选优化，而是实际打印中高频出问题的硬性补救点：
-
.no-print, nav, .ads, .btn这类 class 或元素必须加display: none !important—— 普通display: none在某些打印引擎里会被级联覆盖 - 链接必须显式暴露 URL：
a[href]:after { content: " (" attr(href) ")"; color: #666; font-size: 9pt; }，否则打印出来全是“点击这里”这种无效文本 - 避免跨页断裂：给
table、img、.section加page-break-inside: avoid，不然表格被切成两半是常态 - 强制字体为衬线体 + 黑色：
body { font-family: Georgia, "Times New Roman", serif; color: #000 !important; }，浅灰文字在激光打印后几乎不可读
外部样式表 vs 内联 @media print
两种写法都能生效，但行为有差异：
- 用
<link rel="stylesheet" media="print" href="print.css">更安全——资源加载独立，不会干扰屏幕样式，也方便调试单独的print.css - 内联写法如
<style>@media print { ... }</style>容易被其他!important覆盖，且无法利用浏览器缓存 - 不要混用：比如在
screen.css里塞一段@media print，会导致 CSS 文件体积膨胀，且部分旧版 Safari 会错误解析
真正难的不是写对规则，而是验证——不同浏览器的打印预览渲染差异很大，Chrome 的分页逻辑和 Firefox 完全不一致，而用户最终用的是他电脑上装的那个版本。上线前至少要在 Chrome、Edge、Firefox 三个环境里点开「打印预览」手动翻页检查两次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
