media="print" 必须写，漏了就完全不生效；浏览器不会加载该css文件到打印上下文，@media print规则被忽略，需用独立print.css并正确引入。

media="print" 必须写，漏了就完全不生效。浏览器根本不会把那个 CSS 文件加载进打印上下文，更别说执行里面的规则。

为什么 @media print 样式不生效

不是你 CSS 写错了，而是浏览器压根没“看到”它该在打印时起作用：

• <link rel="stylesheet" href="style.css"> 没加 media="print" —— 它被当普通样式加载，@media print 块被忽略
• <link rel="stylesheet" href="bootstrap.css" media="screen"> 这种带 media="screen" 的，在打印时直接跳过，不参与任何计算
• 框架（比如 Bootstrap）自带的 print.css 可能重置了你的规则，得在 DevTools 的「Computed」面板里切换到 print 媒体看真实生效值
• 选择器优先级不够：.header 会被 body .header 或内联 style 盖掉，必须用更具体的选择器或加 !important

怎么引入 print.css 才真正生效

独立文件不是为了“整洁”，是为避免构建误处理、缓存污染和开发误改：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 新建 print.css，里面只写纯规则，**不要套一层 @media print { }** —— 因为整个文件就是为打印服务的
• 在 里这样引入：<link rel="stylesheet" href="print.css" media="print"> —— media="print" 必须小写、不能拼错，也不能写成 media="screen, print"
• Webpack/Vite 项目中，确保 print.css 不被合并进主 CSS 包；否则媒体查询可能被丢弃或错误解析

打印前必须手动“降级”的几个点

浏览器对打印的支持非常保守，很多屏幕上的默认行为在纸上根本不可靠：

• 背景图默认不打：用 background: none !important;，别信 background-image: none —— 它不覆盖 background 缩写属性
• 图片模糊或溢出：统一加 img { max-width: 100%; height: auto; }；高分辨率图建议用 data-print-src + content: attr(data-print-src) 替换
• 链接只显示文字：必要时用 a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }，但太多会挤占正文空间
• 颜色消失：加 -webkit-print-color-adjust: exact; 和 color-adjust: exact;，否则 background-color 和边框可能白屏

测试时最容易被忽略的三个硬限制

Chrome 的「另存为 PDF」看着完美，但连真打印机就翻车。问题往往出在物理纸张和驱动层：

• A4 宽度只有 595px（非 96dpi 下的像素值），用 max-width: 210mm 比用像素更稳
• 页眉页脚自动加高，@page { margin: 15mm; } 在 Chrome 有效，Firefox 常忽略，得用 body { margin: 0.5cm; } 兜底
• 字体没嵌入就变宋体 —— 中文打印慎用 Web Font，@media print 里直接降级到 "SimSun", "Times New Roman", serif

media="print" 是唯一入口，不是可选项。它一旦漏写或拼错，所有后续样式都归零。真正麻烦的不是写多少规则，而是让那条 <link> 被浏览器正确识别并加载。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！