@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; }
