@import 不能在@media print中使用，因其必须位于样式表最顶部，否则语法非法被忽略；应改用引入，并将打印样式包裹在@media print内确保作用域隔离。
为什么 @import 在 @media print 里基本没用
因为浏览器在解析 CSS 时，@import 规则必须出现在所有非 @import 规则之前；一旦你把它写在 @media print { ... } 块内部，语法就非法了——CSS 解析器直接忽略整条语句，连带后面的规则也可能出问题。
常见错误现象：@import url("print.css") 放在 @media print 里，开发者以为能“按需加载”，结果打印时样式完全没生效，控制台还可能报 Expected identifier or string 这类语法错误。
- 正确位置：只能放在样式表最顶部（
@charset之后、其他任何规则之前） - 想隔离打印样式？别塞进
@media，而是把@import单独提出来，再用@media print包裹它引入的文件内容 - 更稳妥的做法是：用
<link rel="stylesheet" media="print" href="print.css">替代@import，浏览器原生支持且无解析顺序风险
如何真正隔离 print 样式而不污染 screen
关键不是“怎么引入”，而是“怎么确保只在打印时生效”。CSS 层叠本身不区分来源，只看选择器权重和顺序。所以即使你用 <link media="print"> 引入，如果里面写了 body { color: red; }，它照样会覆盖 screen 样式（只要权重够高）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有 print 样式必须显式限定作用域，比如用
@media print { body { ... } }包一层，而不是直接写body { ... }在print.css里 - 避免使用全局重置类（如
.reset），除非它们也包裹在@media print中 - 如果主样式表用了 CSS 自定义属性（
--text-color），print 样式里可以重新赋值，但得写在@media print块内，否则无效 - 注意：某些浏览器（如旧版 Safari）对嵌套
@media的支持较弱，print.css内部不要再套@media screen
display: none 在打印时的意外行为
这是最容易踩的坑：你以为设了 display: none 就能隐藏某块内容，但实际打印预览里它可能又出现了——尤其当该元素被 JavaScript 动态添加了 !important 或 inline style。
原因很简单：打印媒体查询优先级高于普通样式，但低于内联样式和 !important 声明。所以如果你在 JS 里写了 el.style.display = "block"，那 print 样式里的 display: none 就会被无视。
- 安全写法：用
@media print { .ad-banner { display: none !important; } }，加!important是必要手段，不是坏习惯 - 不要依赖 JS 控制打印隐藏逻辑，JS 在打印时可能已停止执行或状态不同步
- 测试时务必用真实打印预览（Chrome 的 Ctrl+P → “更多设置” → “背景图形”勾选与否都要试），别只靠 DevTools 的 “Emulate CSS media” 切换
字体和单位在 print 中的实际表现
网页上看着正常的 rem、em 或 vh，一到打印里就错乱，是因为打印上下文根本不认视口单位，而且默认字号、行高、缩放比例和屏幕完全不同。
典型问题：PDF 导出后文字挤成一团，或页边距消失，或图标字体（如 Font Awesome）变成方块。
- 打印样式中尽量用绝对单位：
pt（点）、in（英寸）、cm，或至少用px配合固定字号（font-size: 12px） - 禁用图标字体，改用 SVG 或 Unicode 符号；如果必须用字体，确保
@font-face已声明且字体文件可访问（本地打印时路径容易 404） - 页边距统一用
@page { margin: 1in; }控制，它比body { margin: 1in; }更可靠 - 避免
background-image，大多数浏览器默认关闭打印背景图，除非用户手动开启
print 样式最难的从来不是写法，而是验证场景太割裂：开发在屏幕上看不出问题，用户导出 PDF 才发现表格断行、分页错位、字体缺失。每次改完，至少用两种方式测：Chrome 打印预览 + 真实打印机（或 PDF 虚拟打印机），少一次都可能漏掉兼容性雷区。
