目录
一、基本语法二、常见使用场景 代码示例1. 隐藏非必要元素2. 调整字体和颜色3. 处理链接的 URL 显示4. 分页控制5. 调整边距和背景三、完整代码实例四、关键注意事项五、进阶技巧@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; } .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/headbody nav导航栏（打印时隐藏）/nav div h1我的简历/h1 p联系我：a href="https://*ex*amp*le.com"个人网站/a/p div/div h2工作经历/h2 p2020-2023：前端工程师/p /div div侧边栏（打印时隐藏）/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 使用内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！