media="print"必须严格小写且无空格，否则文件不加载；print.css须独立、不含@media print包裹；验证需用devtools模拟打印或window.print()触发。
media="print" 必须精确小写且无空格
浏览器只在 media 属性值**完全等于 print（全小写、无前后空格、无多余字符）** 时，才会把对应 CSS 文件纳入打印渲染流程。写成 media="PRINT"、media=" print"、media="screen, print" 或直接省略，都会导致该样式表被跳过——不是“没效果”，而是压根不下载、不解析。
常见错误现象：页面显示正常，但打印预览里导航栏还在、背景色消失、字体变小，十有八九是这里拼错了。
-
media="print"✅ 唯一安全写法 -
media="PRINT"❌ 大小写敏感，无效 -
media=" print"❌ 开头空格，不匹配 -
media="screen, print"❌ 多类型逗号分隔，退化为all，且干扰首屏加载
print.css 必须独立文件，且不能包裹 @media print
用 <link rel="stylesheet" href="print.css" media="print"> 引入时，print.css 文件内容应是纯 CSS 规则，**不要加 @media print { ... } 外层包裹**。因为整个文件已由 media="print" 约束，再套一层反而可能被构建工具误删或解析异常。
典型错误：把桌面样式和打印样式混在一个 CSS 里，靠 @media print 切换——这在 link 加载模式下不生效，浏览器不会识别该文件为“专用于打印”。
- 新建独立
print.css，只放打印专用规则（如nav { display: none; }） - 确保它放在
顶部，不在<noscript></noscript>或条件注释中 - Webpack/Vite 项目中，确认
print.css没被合并进主包，否则媒体类型信息丢失
验证是否真正生效，别只看打印预览按钮
仅点击浏览器菜单里的“打印”或按 Ctrl+P，看到的可能是缓存快照，不一定反映真实行为。最可靠的方式是主动触发打印上下文并检查 DevTools 行为。
- 打开 DevTools → ⋯ → More Tools → Rendering → Emulate CSS media → 选
print：页面立即重绘，可实时观察样式变化 - 在控制台执行
window.print()：强制走完整打印流程，比 UI 按钮更严格 - 检查 Network 面板：
print.css必须出现且状态为 200；若根本没请求，说明media值未匹配或路径错误 - 切换 Elements 面板右上角的「Styles」→ 媒体类型下拉菜单选
print，看目标元素是否应用了预期规则
打印模式下 CSS 行为和单位有硬约束
即使 media="print" 生效，很多桌面端常用写法在打印时会被浏览器主动忽略或重置。这不是 bug，是规范行为。
- 背景色/图默认不打印：需显式声明
-webkit-print-color-adjust: exact !important;并配合background-color - 字体单位优先用
pt（如font-size: 12pt），px和rem在不同 DPI 打印机上缩放不可控 -
display: none有效，visibility: hidden无效（仍占物理空间） -
width/height在流式打印布局中常失效，改用page-break-before或break-inside: avoid - 字体推荐系统安全字体：
font-family: "Times New Roman", Times, serif;
实际调试时最容易被忽略的是：media 属性生效与否，和 CSS 写得对不对是两件事。先确保 media="print" 被浏览器识别并加载了文件，再解决规则是否适配打印环境的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
