本文深入解析了CSS打印样式优化的核心要点与实战避坑指南，强调打印样式必须严格使用@media print包裹才能被浏览器识别，并指出常见错误如遗漏媒体查询或误用display: none导致关键信息丢失；文章提醒开发者需兼顾语义结构保留与视觉精简，强制黑白输出、合理设置字号（推荐≥12pt）、谨慎处理Web字体，并详解分页控制的可靠方案——优先采用break-inside: avoid配合真机测试，而非依赖不可靠的page-break属性；最终指出，打印样式的成败不在于代码多寡，而在于直面真实打印机环境的不可控性，唯有反复实打实打印验证，才能交付真正可用、可归档、可追溯的打印体验。

打印样式表必须用 @media print 包裹，否则浏览器直接忽略

浏览器只在明确的打印媒体查询下才加载或应用对应样式，link 标签没加 media="print"、或者 CSS 里漏写 @media print，样式就完全不生效。常见错误是把打印样式写在默认样式块里，结果页面看着正常，一按 Ctrl+P 就回归浏览器默认排版。

• 正确引入方式：
• 内联写法必须带 @media print { ... }，不能只写 .header { display: none; }
• Chrome 和 Edge 的「另存为 PDF」功能也走同一套 @media print 逻辑，不是特殊通道

display: none 会彻底隐藏内容，但小心删掉关键信息

很多人一上来就把导航、广告、侧边栏全用 display: none 干掉，结果连页码、标题、数据来源都消失了。打印场景下，用户需要的是可追溯、可归档的干净内容，不是“越空越好”。

• 优先隐藏交互元素：.navbar、.btn、.modal 这类纯屏幕用组件
• 保留语义结构：

  、、