本文主要是介绍CSS @media print 使用详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
@media print 是 css 中的打印媒体查询，用于定义仅在打印文档时生效的样式规则。通过它，你可以优化网页的打印效果，比如隐藏不必要的元素、调整布局、修改字体颜色等。下面我会结合代码实例详细讲解。
一、基本语法
@media print {
/* 在此处编写打印时生效的 CSS 规则 */
选择器 {
属性: 值;
}
}二、常见使用场景 & 代码示例
1. 隐藏非必要元素
打印时通常需要隐藏导航栏、广告、按钮等无关内容。
@media print {
.navbar, .ad-banner, .print-button {
display: none !important;
}
}2. 调整字体和颜色
打印时建议使用深色字体（避免浅色文字不清晰），并优先使用pt单位。
@media print {
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
color: #000 !important; /* 强制黑色打印 */
}
}3. 处理链接的 URL 显示
打印时让超链接显示完整的 URL（默认不显示）。
@media print {
a::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
}4. 分页控www.chinasem.cn制
避免内容被截断，控制分页位置。
@media print {
/* 避免在 h2 标题前分页 */
h2 {
page-break-before: avoid;
}
/* 禁止在段落中间分页 */
p {
page-break-inside: avoipythond;
}
/* 在 footer 前强制分页 */
.footer {
page-break-before: always;
}
}5. 调整边距和背景
去掉背景图/颜色（节省墨水），自定义页边距。
@media print {
body {
background: none !important;
margin: 2cm; /* 设置打印边距 */
}
/* 打印时强制显示白色背景的元素 */
.resume-section {
background-color: white !important;
-webkit-print-color-adjust: exact; /* Chrome/Safari */
pphprint-color-adjust: exact;
}
}三、完整代码实例
<!DOCTYPE html> <html&http://www.chinasem.cngt; <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>我的简历&lhttp://www.chinasem.cnt;/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>
四、关键注意事项
测试方法：
无需实际打印，用浏览器「打印预览」（快捷键 Ctrl/Cmd + P）即可调试。
单位选择：
建议用 pt（点）、cm/mm（物理单位）而非 px，更符合纸张尺寸。
覆盖默认样式：
打印样式可能需要 !important 覆盖原有样式（但尽量少用）。
背景颜色处理：
浏览器默认不打印背景色，如需显示需强制设置：
-webkit-print-color-adjust: exact; print-color-adjust: exact;
五、进阶技巧
自定义页眉页脚：
通过 @page 规则定义：
@page {
margin: 2cm;
@top-center {
content: "我的简历";
}
}（注意：浏览器支持有限，不同浏览器效果可能不同）
多页面不同样式：
使用命名页面：
.cover-page {
page: cover; /* 指定页面名称 */
}
@page cover {
margin: 5cm;
}到此这篇关于CSS @media print 使用详解的文章就介绍到这了,更多相关CSS @media print 使用内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章，希望大家以后多多支持编程China编程(www.chinasem.cn)！
这篇关于CSS @media print 使用详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
