@media print 未生效主因是优先级不足、CSS加载限制、浏览器默认禁用背景、框架重置或未触发打印媒体；调试应优先用浏览器打印模拟而非实际打印。
直接用 @media print 就能控制页面在打印时的样式，不需要 JS 或额外工具——但多数人写完发现“怎么没生效”，问题往往出在选择器优先级、CSS 加载方式或浏览器默认行为上。
为什么加了 @media print 却不打印？
常见原因不是语法错，而是被其他样式覆盖或未正确触发：
-
@media print中的规则必须比普通样式优先级高（比如加!important，或用更具体的选择器） - 外部 CSS 文件如果用了
media="screen"属性（如<link rel="stylesheet" media="screen" href="style.css">），它根本不会被打印媒体加载 - Chrome / Edge 默认启用“背景图形”关闭选项（
Print → More settings → Background graphics），background-color和background-image默认不打印 - 某些框架（如 Bootstrap）自带
@media print重置，会清掉你的自定义样式，得检查最终计算样式（DevTools → Computed → print 媒体下看生效值）
@media print 里该隐藏什么、保留什么？
打印本质是信息提炼，不是屏幕复制。重点不是“看起来像”，而是“印出来能用”：
- 必藏：导航栏、广告位、侧边栏、交互按钮（
.navbar, .ads, .btn-print, .modal）、页脚版权（除非是文档页脚） - 必显：正文文本、表格数据、标题层级（
h1–h6）、带编号的列表（ol）、关键链接（可加content: " (" attr(href) ")";显示 URL） - 慎用：浮动（
float）、绝对定位（position: absolute）、Flex/Grid 布局——部分打印机驱动不支持，建议降级为display: block+margin - 字体单位优先用
pt或cm（如font-size: 12pt），避免rem在打印上下文中计算异常
如何让链接在打印时显示 URL？
纯文字链接在纸上毫无意义，用户没法点击。加一段简单 CSS 就能补全：
立即学习“前端免费学习笔记（深入）”；
@media print {
a[href]:not([href^="javascript:"]):not([href^="#"])::after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #666;
}
}
注意点：
- 排除
javascript:和锚点链接，避免打印无意义内容 - 用
::after而非::before，防止打断行内布局 - 如果页面有大量外链，考虑加
white-space: nowrap防止 URL 换行截断 - 某些 PDF 打印插件（如 Chrome “另存为 PDF”）对
attr()支持不稳定，建议测试输出效果
打印样式调试最有效的办法
别等真纸打印——浪费墨水还难复现。用浏览器原生能力快速验证：
- Chrome / Edge：打开 DevTools →
Ctrl+Shift+P→ 输入 “Rendering” → 选 “Emulate CSS media type” → 切换为print - Firefox：DevTools → ⚙️ 设置图标 → “Enable print media emulation” 打钩，顶部工具栏会出现打印预览按钮
- 真实 PDF 输出前，先用系统打印对话框的“另存为 PDF”导出，比“打印到纸”快十倍，且能反复对比样式差异
- 如果某块内容始终不出现，检查是否被
overflow: hidden或visibility: hidden父元素裁剪——打印时这些属性依然生效
真正麻烦的不是写 @media print，而是不同浏览器对分页（page-break-inside: avoid）、跨页表格、字体嵌入的支持差异极大；如果你要打发票或合同，还得考虑 PDF 生成服务，纯 CSS 打印只是第一道过滤器。
