media="print"是唯一标准取值；需确保link标签在head顶部、非动态插入、CSS文件正常加载，且注意打印模式下浏览器重置样式、分页控制及字体单位等特殊规则。
link 标签的 media 属性值写什么才真正触发打印样式
只有当 media 值被浏览器识别为“适用于打印场景”时，对应 CSS 才会在打印预览或实际打印时生效。常见错误是写成 media="print" 但样式没反应——这通常不是语法错，而是后续加载或规则被覆盖的问题。
-
media="print"是唯一标准且必须小写的取值；media="PRINT"或media="screen, print"在部分旧浏览器中可能不触发纯打印样式表隔离 - 如果同时用
@media print { ... }和外部<link media="print">，两者互不干扰，但后者更早解析、优先级略高（尤其对!important规则） - Chrome 和 Edge 的打印预览默认启用“背景图形”选项关闭状态，即使写了
background: #fff也可能不显示——这不是media的问题，而是用户设置
为什么 link 加载的 print CSS 有时完全不生效
最常被忽略的是：外部样式表必须在 DOM 完全加载前就存在，且不能被 JavaScript 动态移除或禁用。很多 SPA 应用在路由切换时会清空 <head> 中的 <link>，导致打印样式丢失。
- 确保
<link rel="stylesheet" href="print.css" media="print">写在<head>顶部，不要包裹在<noscript>或条件注释里 - 避免用 JS 动态插入该
<link>，因为浏览器可能已开始构建打印布局，来不及应用新样式 - 检查 DevTools 的 Network 面板：若
print.css返回 404 或 MIME 类型错误（如返回text/html），浏览器会静默忽略该样式表
print.css 里哪些 CSS 规则容易被浏览器忽略
打印机样式不是“桌面样式加个 @media print”就能跑通。浏览器在打印模式下会主动重置大量属性，比如强制 color 变黑、忽略 background-image、折叠 float 元素。
-
display: none对<aside>、<nav>等非内容区域有效，但visibility: hidden不行——它仍占打印空间 -
width和height在打印流式布局中常失效，推荐用page-break-before/page-break-after控制分页 - 字体单位优先用
pt（如font-size: 12pt），而非px或rem，后者在不同 DPI 打印机上缩放不可控
如何验证 media="print" 是否真正在起作用
别只信打印预览界面右上角的“打印”按钮——那只是渲染快照，不一定反映真实输出。最可靠的验证方式是绕过 UI 直接触发打印逻辑并观察行为。
立即学习“前端免费学习笔记（深入）”；
- 在控制台执行
window.print()，此时浏览器强制应用所有media="print"样式，比点击菜单更严格 - 打开 DevTools → Rendering → 勾选 “Emulate CSS media type” → 选
print，可实时看到页面如何被重排，但注意：此模式不模拟分页或纸张尺寸 - 用 PDF 打印驱动（如 macOS 的 “Save as PDF” 或 Windows 的 “Microsoft Print to PDF”）导出后，用 Acrobat 打开检查实际渲染结果——这是唯一能确认
page-break和@page是否生效的方式
真正难的不是写 media="print"，而是让每一页都按预期断开、不留空白、不截断表格行——这些细节在 CSS 打印规范里没有银弹，得靠反复导出 PDF + 调整 page-break-inside: avoid 和容器高度来磨。
