@media print是唯一可靠方式，必须用媒体查询条件分离屏幕与打印样式，避免display:none全局隐藏导致打印失效，且需通过link[media="print"]引入或独立文件确保加载生效。
@media print 是唯一可靠方式，其他方案（比如 JS 动态切换 class）在真实打印预览中不可靠，且无法控制浏览器原生分页行为。
为什么 display: none 在屏幕样式里不管用
很多人误以为给元素加 display: none 就能“隐藏它不打印”，但这是错的——display: none 会同时屏蔽屏幕和打印渲染。真正需要的是“屏幕显示、打印隐藏”或“屏幕隐藏、打印显示”，必须靠媒体查询做条件分离。
- 写成
.print-only { display: none; }再在@media print里设display: block，结果是：屏幕下直接不渲染，打印时根本没这个 DOM 节点可显示 - 正确做法是默认可见（或默认
display: block），再用@media screen隐藏，或用@media print显式显示 - 更稳妥的写法是统一用
@media print控制打印态，避免混用@media screen和@media print导致权重冲突
@media print 中如何让某元素仅打印时出现
关键在于默认让它在屏幕下不可见，再在打印媒体中激活。不能依赖 JS 或 HTML 属性开关，CSS 媒体查询才是声明式、可预测的路径。
- 给目标元素加类名，例如
class="print-only" - 在全局 CSS 或
<style>块中写：@media screen { .print-only { display: none !important; } } @media print { .print-only { display: block !important; } } - 如果页面已用
display: flex或grid布局，display: block可能破坏结构，此时改用visibility: visible+position: static更安全 - 务必加
!important：框架组件或内联样式可能覆盖媒体查询规则，尤其 React/Vue 的 scoped style 或 CSS-in-JS 默认不注入@media print
容易被忽略的兼容性与加载陷阱
写了 @media print 却没效果，90% 不是语法问题，而是加载或解析失败。
立即学习“前端免费学习笔记（深入）”；
-
@import必须放在 CSS 文件最顶部，否则其后的@media print规则会被浏览器忽略 - 用
<link rel="stylesheet" href="print.css" media="print">加载时，确保路径正确且无 CORS 拦截（本地文件协议file://下尤其常见） - DevTools 的 “Emulate CSS media type → print” 仅模拟样式生效，不触发真实分页引擎，验证必须用
Ctrl+P/Cmd+P进打印预览 - Safari 对
@page和部分@media print规则静默失效，建议用font-size: 12pt、color: #000等基础属性兜底
真正难的不是写几行 @media print，而是确认它被浏览器真实加载、解析、应用——尤其是当项目用了 Shadow DOM、CSS Modules 或构建工具自动提取样式时，@media print 很容易被剥离或作用域隔离。
