最稳妥的打印样式表引入方式是使用，浏览器仅在打印时加载，不影响页面正常渲染；避免media="screen,print"、"all"或@import嵌套；中大型项目宜独立文件以利缓存与维护；调试需检查link存在性、DevTools媒体模拟设置及SSR过滤；打印时优先用display: none而非visibility: hidden。
用 link[media="print"] 单独加载打印样式表
最稳妥、最符合规范的按需引入方式，就是通过 标签配合 media="print" 属性。浏览器只在触发打印流程（Ctrl+P / Cmd+P）时才加载并应用该样式表，页面正常渲染完全不受影响。
正确写法：
<link rel="stylesheet" href="print.css" media="print">
常见错误包括：
-
media="screen,print"—— 会同时作用于屏幕，可能意外覆盖现有布局 -
media="all"或漏写media—— 等同于普通 CSS，增加首屏渲染负担 - 用
@import在@media print块里引入 —— 无效，CSS 规范不支持嵌套 import
为什么不能把 print.css 写进主样式文件里？
可以写，但不推荐用于中大型项目。内联 @media print 块虽然省一次请求，但会带来三个实际问题：
- 主 CSS 体积膨胀，尤其当打印样式复杂（如多页模板、分页控制、PDF 导出适配）时
- 样式权重容易被后续加载的框架 CSS（如 Bootstrap、Ant Design）覆盖，调试困难
- 无法利用 HTTP 缓存分离策略：
print.css更新频率远低于主样式，独立文件更利于缓存复用
简单页面（比如只有一页发货单）用 @media print { ... } 内联没问题；但涉及表格跨页、页眉页脚、A4 尺寸适配等场景，拆出 print.css 是更可控的选择。
print.css 加载后没生效？先查这三处
不是代码写错了，而是环境或加载链路中断了。验证步骤如下：
- 打开打印预览后，在 Elements 面板搜索
print.css，确认标签存在且未被 JS 移除 - DevTools → Rendering → 检查是否误启用了
Emulate CSS media: screen（这会强制禁用所有 print 规则） - 如果是 SSR 框架（如 Nuxt、Next.js），确认服务端没有过滤掉
media="print"的 link 标签
Chrome/Firefox 的打印预览必须走原生流程，PDF 插件、“另存为 PDF”按钮、截图转 PDF 工具均不触发 media="print"。
打印样式里 display: none 和 visibility: hidden 别混用
二者在打印输出中行为差异极大，直接影响内容完整性：
-
display: none—— 元素彻底退出文档流，打印时完全不占位（推荐用于导航栏、操作按钮、广告位） -
visibility: hidden—— 元素仍保留原始高度/宽度，只是不可见；多数浏览器打印时会留下空白区域，导致页尾莫名多出大片留白 - 特别注意：某些框架组件（如 Vue 的
v-if/v-show）底层就分别对应这两种行为，别想当然认为“隐藏了就等于不打印”
真正需要“视觉隐藏但保留语义”的场景极少，绝大多数打印需求应优先用 display: none 配合明确选择器（如 .no-print），避免靠权重猜覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
