使用@media print可控制网页打印样式，通过隐藏非必要元素、调整字体与颜色、设置分页等方式优化打印效果，提升用户体验。
在网页开发中，有时需要控制页面打印时的显示效果，比如隐藏导航栏、广告或按钮，只保留核心内容。CSS 提供了通过 media="print" 来定义打印样式的方法，让网页在打印时自动应用特定样式。
使用 @media print 定义打印样式
最常用的方式是在 CSS 文件或页面的 标签中使用 @media print 规则，专门设置打印时生效的样式。
例如：
@media print {
.header, .sidebar, .footer, .no-print {
display: none !important;
}
body {
font-size: 12pt;
color: #000;
}
.content {
width: 100%;
margin: 0;
}
}
这样在打印时，带有 .no-print 类的元素将被隐藏，正文内容则以更合适的字体大小和布局输出。
立即学习“前端免费学习笔记（深入）”；
在 HTML 中引入带 media 的样式表
也可以在 HTML 的 中单独引入一个专用于打印的 CSS 文件：
其中：
- media="screen" 表示仅在屏幕上显示时应用（如浏览器查看）
- media="print" 表示仅在打印或打印预览时应用
这种方式可以分离屏幕样式与打印样式，便于维护。
常见打印优化技巧
为了让打印结果更清晰实用，可以考虑以下做法：
- 隐藏不必要的元素：如按钮、菜单、广告等，添加 .no-print { display: none; }
- 调整颜色：避免背景色浪费墨水，可设为白色，文字设为黑色
- 控制分页：使用 page-break-before 或 page-break-after 控制打印分页位置
- 设置合适字体大小：打印建议使用 pt 单位，如 10pt–12pt
基本上就这些。通过 media="print"，你可以轻松控制网页打印时的外观，提升用户体验。不复杂但容易忽略。
