media="print"必须全小写、无空格、无多余字符，否则浏览器完全不加载该CSS；print.css须为独立文件且不套@media print包裹，调试需在打印预览中强制重载。
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 必须是独立文件，不能塞在主样式表里
把 @media print { } 块丢进 main.css 末尾，看似省事，实则高风险：前面的通用规则（比如 .header { display: block; }）会层叠覆盖它；构建工具（如 Webpack/Vite）可能在压缩或合并时误删或错解析媒体查询；缓存污染后改了 print 规则却看不到效果。
真正生效的前提是：浏览器把整个 print.css 当作一份“专为打印准备的样式上下文”来加载和解析。
立即学习“前端免费学习笔记（深入）”；
- 新建纯文本文件
print.css，里面只写打印专用规则，**不要套一层@media print { }** - 确保构建配置中
print.css不被合并进main.css或其他 bundle - 避免用
@import在screen.css里引入 print 规则——Safari 和旧 Edge 常直接跳过
打印模式下哪些 CSS 规则容易失效或被重置
浏览器在打印上下文中会主动重置大量属性：强制 color 变黑、忽略 background-image、折叠 float 元素、禁用 flex 和 grid 布局（IE11 及部分 Chrome 版本会回退到块流）。
-
display: none对<nav>、<footer>等非内容区域有效；visibility: hidden不行——它仍占打印空间 -
width和height在打印流式布局中常失效，推荐用page-break-before/page-break-after控制分页 - 字体单位优先用
pt（如font-size: 12pt），而非px或rem，后者在不同 DPI 打印机上缩放不可控 - 图片默认不打印背景色/渐变，需三重声明：
-webkit-print-color-adjust: exact !important;
@page 和 @media print 必须平级，不能嵌套
@page 控纸张物理属性（尺寸、边距、方向），@media print 控内容渲染样式，二者语义不同、作用域不同，必须平级存在，不能嵌套。
-
@page { size: A4; margin: 15mm; }✅ 真正设置纸张尺寸和边距 -
@media print { @page { size: A4; } }❌ 整个@page块会被忽略 -
@page :first { margin-top: 25mm; }✅ 可单独加首页页眉空间，但 IE11 只认size和margin - 横向打印用
@page { size: landscape; }，但需配合容器max-width: none，否则 A4 纵向宽度会截断长表格
实际调试时最容易被忽略的点是：你以为改了 print.css 就立刻生效，但 Chrome/Edge 的打印预览会缓存 CSS 解析结果；仅刷新页面无效，必须在打印预览窗口中按 Ctrl+Shift+R（Windows）或 Cmd+Shift+R（macOS）强制重载，或者直接在 DevTools 的 Rendering 面板中模拟 print 媒体类型。
