标签的media="print"是专用于打印样式表的硬性要求，设为screen或遗漏该属性会导致打印时样式丢失；应避免display: none破坏可访问性，慎用相对单位和外部资源，并通过真实打印预览验证效果。
link元素的media属性必须设为print
浏览器只在匹配media值时才加载并应用对应样式表。若想让某张CSS专用于打印，<link>标签里media="print"是硬性要求，写成media="screen"或漏掉该属性，打印预览里根本不会生效。
常见错误现象：页面显示正常，但打印时样式全丢、字体变小、背景色消失——大概率是media没设对，或设成了all（虽然all理论上包含print，但部分旧版浏览器和打印驱动不严格遵守）。
-
<link rel="stylesheet" href="print.css" media="print">✅ 正确且兼容性最好 -
<link rel="stylesheet" href="print.css" media="all">⚠️ 看似通用，实则不可靠，尤其在Chrome打印预览中常被忽略 -
<link rel="stylesheet" href="print.css">❌ 默认media="all"，但行为不一致，等同于上一条风险
避免在print样式表里用display: none破坏可访问性
很多人习惯用display: none隐藏页眉、导航、广告等“非打印内容”，但这会同时移除屏幕阅读器的访问路径。如果用户依赖读屏软件，又恰好触发了打印逻辑（比如按Ctrl+P），可能直接丢失关键信息。
更稳妥的做法是视觉隐藏但保留语义：
- 用
position: absolute; left: -9999px;把元素移出视口，不影响DOM结构和读屏器遍历 - 或加
aria-hidden="false"显式声明仍需被读取（配合visibility: hidden或opacity: 0作视觉隐藏） - 绝对不要对
<main></main>、<h1></h1>、<nav aria-label></nav>这类语义主干元素用display: none
print.css里慎用相对单位和外部资源
打印环境对CSS单位和资源加载更敏感：em、rem在不同打印机驱动下换算不稳定；@import可能被忽略；Web字体几乎必然回退到系统字体。
实操建议：
- 优先用
pt（如font-size: 12pt）或cm/mm定义字号、行高、边距，确保物理尺寸可控 - 避免
@import，所有打印样式必须内联或通过<link>一次性加载 - 不要依赖Google Fonts等CDN字体，要么用系统安全字体栈（
"Times New Roman", Times, serif），要么转成@font-face内联woff2 base64（仅限极简字体） - 图片尽量用
data:image/png;base64内联，否则打印时容易缺失或变成空白方块
测试必须用真实打印预览，不能只靠开发者工具模拟
Chrome DevTools的“Rendering”面板里有Emulate CSS media选项，但它只改渲染层，不触发真实打印流，无法验证分页、页眉页脚、背景图是否启用、page-break-inside: avoid是否生效。
真正可靠的验证方式只有两种：
- 在Chrome / Edge中打开
Ctrl+P→ 切换到“目标打印机”为另存为PDF，生成PDF后逐页检查 - 用Firefox打开打印预览（它对
page-break和size支持更严格），对比Chrome结果 - 特别注意含表格、长列表、浮动元素的页面——它们最容易出现跨页截断错乱，而模拟模式完全看不出
最常被忽略的是@page规则：它只能在media="print"上下文中生效，且必须放在样式表顶层（不能嵌套在@media print里），否则连PDF都看不到效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
