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