必须用@media print主动重置且引入独立print.css文件并设置media="print"，否则样式不生效；常见失效原因包括未加media属性、框架样式覆盖、优先级不足及构建工具误处理。
必须用 @media print 主动重置，不能依赖浏览器默认行为；独立 print.css 文件比内联样式更可靠，且 media="print" 属性漏写就完全失效。
为什么 @media print 样式不生效
常见现象：写了 .header { display: none; }，打印预览里导航栏还在；改了 font-size，打出来还是小号字。根本原因不是 CSS 写错，而是：
-
<link rel="stylesheet" href="style.css">没加media="print"，浏览器当普通样式加载，压根不进打印上下文 - 外部样式表如果带
media="screen"，它在打印时被直接忽略 - 框架（如 Bootstrap）自带的 print 样式可能覆盖你的规则，得在 DevTools 的「Computed」面板里切换到
print媒体看真实生效值 - 选择器优先级不够：
.nav会被body .nav或内联style盖掉，必须加!important或用更具体的选择器
怎么引入 print.css 才真正生效
把打印样式抽成独立文件，不是为了“整洁”，而是避免开发误改、缓存污染、构建工具误压缩。关键操作只有三步：
- 新建
print.css，里面只写@media print以外的纯规则（不要套一层@media print { ... }） - 在
里这样引入：<link rel="stylesheet" href="print.css" media="print">——media="print"必须小写、不能拼错，也不能写成media="screen, print" - Webpack/Vite 等构建工具中，确保
print.css不被合并进主 CSS 包，否则媒体查询可能被丢弃或错误解析
打印前必须手动“降级”的几个点
浏览器对打印的支持非常保守：背景图默认不打，position: fixed 元素常被截断，链接显示完整 URL 而非文字。这些不能指望自动适配：
- 禁用背景：用
background: none !important;，别信background-image: none—— 它不覆盖background缩写属性 - 图片处理：统一加
img { max-width: 100%; height: auto; }；高分辨率图建议用data-print-src+content: attr(data-print-src)替换，避免模糊 - 链接显示 URL：仅在必要时用
a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }，太多会挤占正文空间 - 强制打印颜色：加
-webkit-print-color-adjust: exact; color-adjust: exact;，否则background-color和边框可能消失
测试时最容易被忽略的三个硬限制
Chrome 的「另存为 PDF」看着完美，但连真打印机就翻车。问题往往出在物理纸张和驱动层：
- A4 实际可用宽度只有约
595px（非屏幕像素），不是 100% 宽度能填满；@page { size: A4; margin: 0; }要配合使用 - 页眉页脚是浏览器自动加的，高度固定（通常 0.4 英寸），会挤压内容区，
@page { margin: 0; }只能去掉它，但部分打印机驱动仍会强加 - 中文乱码主因是字体未嵌入：CSS 中用
font-family: "Source Han Sans CN", "Noto Sans CJK SC", sans-serif;，别依赖 Web 字体或自定义@font-face—— 打印时大概率 fallback 到宋体
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
