media="print"必须全小写且独占，否则样式表不加载；print.css须独立文件、禁用rem/%/em、用pt/mm单位；验证需进入打印上下文。
link[media="print"]必须小写且独占，拼错就彻底失效
浏览器只在 media 属性值**精确等于 print（全小写、无空格、无逗号、无其他字符）** 时，才把对应 CSS 文件加载进打印渲染流程。写成 media="PRINT"、media=" print"、media="screen, print" 或直接省略 media，结果都一样：样式表被忽略——不是“没效果”，而是压根没参与打印计算。
常见错误现象：页面显示正常，但打印预览里导航栏还在、背景色消失、链接变死文本，大概率是这里出问题。
-
<link rel="stylesheet" href="print.css" media="print">✅ 唯一推荐写法 -
<link rel="stylesheet" href="print.css" media="all">⚠️ Chrome 打印预览常跳过，旧版 Edge 不认 -
<link rel="stylesheet" href="print.css">❌ 等同于media="all"，行为不可靠
print.css 必须是独立文件，不能塞在 main.css 里
把 @media print { } 块丢进主样式表末尾，看似省事，实则高风险：前面的通用规则（比如 .header { display: block; }）会层叠覆盖它；构建工具（如 Webpack/Vite）可能在压缩或合并时误删或错解析媒体查询；缓存污染后改了 print 规则却看不到效果。
真正生效的前提是：浏览器把整个 print.css 当作一份“专为打印准备的样式上下文”来加载和解析。
- 新建纯文本文件
print.css，里面只写打印专用规则，**不要套一层@media print { }** - 确保构建配置中
print.css不被合并进main.css或其他 bundle - 避免用
@import在screen.css里引入 print 规则——Safari 和旧 Edge 常直接跳过
print.css 里禁用 rem/%/em，优先用 pt 或 mm
打印不是屏幕渲染，DPI、缩放、设备像素比都不稳定。用 rem、%、em 或甚至 px，会导致字号、行高、边距在不同打印机或预览窗口里严重偏移。物理单位才是锚点。
- 字体大小写成
font-size: 12pt，别用16px或1rem - 页边距用
@page { margin: 15mm; }，而非20px - 避免
background-color：默认不打印，如需强调内容，改用border或font-weight: bold - 链接要可见：
a::after { content: " (" attr(href) ")"; }
验证是否生效，必须进打印上下文，不能靠肉眼扫页面
media="print" 的样式表在普通浏览中完全不加载、不解析、不参与层叠。它不是“开关”，而是“条件加载指令”。你在 DevTools 的 Elements 或 Styles 面板里看到它显示为灰色或 “inactive”，属正常现象。
想验证是否真起作用？必须进入打印上下文：
- 打开 DevTools → 右上角「⋯」→ More Tools → Rendering → 勾选 Emulate CSS media，下拉选
print - 或者直接执行
window.print()，此时浏览器强制应用所有media="print"样式，比点击菜单更严格 - 注意：Rendering 面板的模拟器不会触发
@page规则，页边距、分页行为得真打出来看 PDF
最容易被忽略的是：哪怕 print.css 里写了 body { background: red; }，日常打开页面也永远是白底——这不是 bug，是设计如此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
