CSS @media print 使用详解
@media print
是 CSS 中的打印媒体查询,用于定义仅在打印文档时生效的样式规则。通过它,你可以优化网页的打印效果,比如隐藏不必要的元素、调整布局、修改字体颜色等。下面我会结合代码实例详细讲解。
一、基本语法
css
@media print { /* 在此处编写打印时生效的 CSS 规则 */ 选择器 { 属性: 值; } }
二、常见使用场景 & 代码示例
1. 隐藏非必要元素
打印时通常需要隐藏导航栏、广告、按钮等无关内容。
css
@media print { .navbar, .ad-banner, .print-button { display: none !important; } }
2. 调整字体和颜色
打印时建议使用深色字体(避免浅色文字不清晰),并优先使用pt
单位。
css
@media print { body { font-family: "Times New Roman", serif; font-size: 12pt; color: #000 !important; /* 强制黑色打印 */ } }
3. 处理链接的 URL 显示
打印时让超链接显示完整的 URL(默认不显示)。
css
@media print { a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } }
4. 分页控制
避免内容被截断,控制分页位置。
css
@media print { /* 避免在 h2 标题前分页 */ h2 { page-break-before: avoid; } /* 禁止在段落中间分页 */ p { page-break-inside: avoid; } /* 在 footer 前强制分页 */ .footer { page-break-before: always; } }
5. 调整边距和背景
去掉背景图/颜色(节省墨水),自定义页边距。
css
@media print { body { background: none !important; margin: 2cm; /* 设置打印边距 */ } /* 打印时强制显示白色背景的元素 */ .resume-section { background-color: white !important; -webkit-print-color-adjust: exact; /* Chrome/Safari */ print-color-adjust: exact; } }
三、完整代码实例
html
<!DOCTYPE html> <html> <head> <style> /* 常规样式 */ .nav { background: #333; color: white; padding: 10px; } .sidebar { float: right; width: 30%; background: #f0f0f0; } a { color: blue; } /* 打印样式 */ @media print { .nav, .sidebar { display: none; } body { font-size: 12pt; color: #000; margin: 1cm; } a::after { content: " (" attr(href) ")"; } .page-break { page-break-before: always; } } </style> </head> <body> <nav class="nav">导航栏(打印时隐藏)</nav> <div class="content"> <h1>我的简历</h1> <p>联系我:<a href="https://example.com">个人网站</a></p> <div class="page-break"></div> <h2>工作经历</h2> <p>2020-2023:前端工程师</p> </div> <div class="sidebar">侧边栏(打印时隐藏)</div> </body> </html>
运行 HTML
四、关键注意事项
-
测试方法:
无需实际打印,用浏览器「打印预览」(快捷键Ctrl/Cmd + P
)即可调试。 -
单位选择:
建议用pt
(点)、cm/mm
(物理单位)而非px
,更符合纸张尺寸。 -
覆盖默认样式:
打印样式可能需要!important
覆盖原有样式(但尽量少用)。 -
背景颜色处理:
浏览器默认不打印背景色,如需显示需强制设置:css
-webkit-print-color-adjust: exact; print-color-adjust: exact;
五、进阶技巧
-
自定义页眉页脚:
通过@page
规则定义:css
@page { margin: 2cm; @top-center { content: "我的简历"; } }
(注意:浏览器支持有限,不同浏览器效果可能不同)
-
多页面不同样式:
使用命名页面:css
.cover-page { page: cover; /* 指定页面名称 */ } @page cover { margin: 5cm; }