如何利用CSS @media print在HTML中设置打印专用样式规则？

本文共计1046个文字，预计阅读时间需要5分钟。

《@media print 是一种确保打印效果的稳定控制方式，其他方案（如依赖 JS 拦截打印事件、用 iframe 隔离、或依赖 @page）在 Chrome/Firefox/Edge 上表现不一致，容易漏规规则或完全失效。》

为什么直接写 @media print 常常没反应

不是语法错，而是被屏幕样式覆盖了——浏览器不会自动给 @media print 更高优先级。哪怕你写在 CSS 文件末尾，只要选择器权重一样，.header { display: block; } 这种无媒体查询的规则仍会赢。

• 用更具体的选择器，比如把 .header 改成 body .header 或 div#app .header
• 避免在同一个 CSS 文件里混写 @media screen 和 @media print，旧版 Safari 会解析错
• 别依赖 !important 去压屏幕样式：它在某些打印引擎里会被忽略，或导致后续调试失焦
• 检查是否启用了「打印背景图形」选项：Chrome 默认关闭，background-color 再写也白搭

哪些元素必须显式隐藏，且怎么写才真正消失

导航栏、广告位、按钮、加载提示这些不会自动“知道”自己不该上纸——不声明，它们就照常渲染，轻则挤占正文，重则生成空白页。