HTML/CSS 打印页面样式常见问题汇总（附代码示例）

新手学打印页面样式最常见的误区，就是只记用法、不理解原理。这样写出来的代码看似能跑，其实埋着隐患。本文尝试既讲用法，也讲背后的道理。

打印页面样式到底解决了什么问题？

打印页面样式这个话题，网上的文章要么太浅，要么一上来就堆术语。本文换个方式：从你最常遇到的场景出发，逐步深入。

打印页面样式实战要点拆解

1. 团队协作中，打印页面样式的用法约定要写进开发规范，避免各写各的。
2. 使用打印页面样式时注意性能开销，热点代码路径上要避免不必要的调用。
3. 学习打印页面样式时多写小例子验证，不要只在脑子里推演。
4. 对打印页面样式的输入做校验，永远不要相信外部传入的数据。
5. 多看看优秀开源项目里打印页面样式的用法，那是最好的学习材料。

接下来用代码实际演示一下打印页面样式。

打印页面样式代码示例

打印页面样式：

@media print {
  /* 隐藏无关元素 */
  .navbar, .sidebar, .footer, .btn { display: none !important; }

  /* 打印用黑字白底，省墨又清晰 */
  body { color: #000; background: #fff; font-size: 12pt; }

  /* 链接后显示 URL，方便纸质查阅 */
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 90%; }

  /* 避免表格跨页被截断 */
  table { page-break-inside: avoid; }
}

实践中的注意事项

1. 上线前在预发布环境完整跑一遍，很多环境问题会提前暴露。
2. 批量操作前先小批量试跑，确认无误再全量执行。
3. 学会用二分法排查：注释掉一半代码，问题范围立刻减半。
4. 重要功能上线前，先写好回滚方案，再点开始按钮。

最后说两句

关于打印页面样式就写到这里。如果文中有讲得不清楚的地方，欢迎指出，我会及时补充完善。

---

遇见问题加 QQ23979811 协助处理