link标签引入print样式表必须加media="print"，否则会被当作普通CSS加载并影响渲染；常见错误包括media="screen,print"、media="all"或漏写media属性；推荐独立print.css或@media print内联写法，注意@import无效及DevTools媒体模拟干扰。
link 标签引入 print 样式表必须加 media="print"
浏览器只在打印预览或实际打印时加载并应用 media="print" 的样式表。漏写这个属性，样式表会被当作普通 CSS 加载（影响页面渲染），但完全不会参与打印逻辑。
正确写法：
常见错误：
- 写成
media="screen,print"—— 会同时影响屏幕显示，容易污染布局 - 写成
media="all"—— 打印时生效，但也会在页面加载时参与重排重绘，可能拖慢首屏 - 漏写
media属性 —— 等同于media="all"，行为同上
print 媒体查询写在主 CSS 里也能用，但要注意优先级和覆盖逻辑
如果已在 main.css 中写了 @media print { ... }，它会和 link[media="print"] 同时生效，遵循 CSS 层叠规则：后加载的、选择器权重更高的样式胜出。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 简单项目直接用
@media print内联写法，省去额外请求 - 复杂打印需求（如多页模板、PDF 导出准备）建议拆到独立
print.css，避免主样式表膨胀 - 注意：CSS 中的
@import在@media print内部无效，不要这么写
Chrome/Firefox 打印预览下 link[media="print"] 不生效？检查是否被禁用
开发时常见现象：改了 print.css，但打印预览里没反应。不是缓存问题，而是：
- DevTools → Rendering 面板勾选了
Emulate CSS media: screen（这会强制忽略所有print规则） - 某些前端框架（如 Next.js）默认在 SSR 阶段剥离
media="print"的 link 标签 - 使用了
rel="preload"或rel="prefetch"错误地替换了rel="stylesheet"
验证方法：打开打印预览后，在 Elements 面板搜索 print.css，确认该 标签存在且未被 JS 动态移除。
print 样式里慎用 display: none 和 visibility: hidden
这两者都能隐藏元素，但行为差异直接影响打印内容完整性：
-
display: none—— 元素彻底不参与文档流，打印时完全消失（推荐用于导航栏、广告位等） -
visibility: hidden—— 元素仍占位，只是不可见；打印时多数浏览器仍会保留空白区域（容易造成页眉/页脚错位） - 特别注意：
opacity: 0在打印中通常**仍然可见**（Chrome 默认忽略 opacity 打印）
更稳妥的隐藏方式：
@media print {
.no-print { display: none !important; }
} 
