@media print 是唯一可靠入口，必须独立写在 print.css 中并用 引入，漏掉 no-print 隐藏、链接 url 显示、page-break-inside: avoid、强制衬线字体等硬性规则将导致打印失败。
@media print 是唯一可靠入口，其他写法在真实打印场景中大概率失效。
为什么 @media print 必须独立写、不能混进主 CSS
浏览器对 @media print 的解析不提升选择器权重，它照常参与层叠——如果你把 @media print { .header { display: none; } } 塞在 main.css 末尾，而前面有 .header { display: block !important; }，那打印时 header 照样显示。
更隐蔽的问题是：某些框架（如 Bootstrap）自带 @media print 重置规则，会悄悄覆盖你写的 font-size 或 margin，而你根本没意识到它们被加载了。
- 必须新建独立文件
print.css，只放打印专用规则，不包含任何@media screen或通用样式 - HTML 中用
<link rel="stylesheet" href="print.css" media="print">引入 -
media="print"必须小写、英文双引号包裹；media="PRINT"或media=print（缺引号）均无效 - 不要写成
media="screen, print"——这会让浏览器在页面加载时就拉取并解析该 CSS，可能干扰屏幕样式
@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（同时补break-inside: avoid提高兼容性） - 强制字体为衬线体 + 黑色：
body { font-family: Georgia, "Times New Roman", serif; color: #000 !important; }，浅灰文字在激光打印后几乎不可读
为什么 @page 规则基本靠不住
@page 只能作辅助手段，不能当作主要控制逻辑。Chrome 和 Edge 在用户手动选择“最小边距”或“无边距”时，整个 @page 规则就被忽略；Firefox 对 @page :first 或 @page :left 的支持也常被禁用。
真实场景中，@page { margin: 2cm; } 写了等于没写——因为最终决定权不在你，而在用户打印机对话框里的那个下拉菜单。
- 别用
@page控制边距、页眉页脚等物理输出参数 - 如果真要用，仅限于极简场景，比如
@page { size: A4 landscape; }，且必须配合用户端明确告知“请在打印设置中关闭‘适应页面’” - 所有内容排版逻辑必须落在
@media print内，这是唯一跨浏览器稳定的控制层
如何验证打印样式是否真正生效
不同浏览器的打印预览渲染差异很大：Chrome 的分页逻辑和 Firefox 完全不一致，而 Safari 的 page-break-inside 行为又和两者都不同。上线前至少要在 Chrome、Edge、Firefox 三个环境里点开「打印预览」手动翻页检查两次。
- 用 Chrome DevTools 的「Rendering」面板勾选
Emulate CSS media type → print可实时预览，但注意：这只是模拟，不能替代真实打印预览 - 不要依赖
window.print()自动触发来测试——它绕过浏览器 UI，无法反映用户真实操作路径 - 重点检查：表格是否被截断、图片是否错位、超链接是否带 URL、标题是否丢失、页边是否意外留白
真正难的不是写对规则，而是让同一套 @media print 在三种主流浏览器里都分页合理、语义完整、不丢关键信息。很多团队卡在最后一步：以为代码跑通了，结果客户打出来第一页只有标题，第二页才开始正文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
