正文

CSS @media print 使用实例详解

︶ㄣSDDLL学院 メ
SDDLL学院V管理员 / 阅读
0711
一、基本语法 @media print { /* 在此处编写打印时生效的 CSS 规则 */ 选择器 { 属性: 值; }} 二、常见使用场景 代码示例 1. 隐藏非必要元素 打印时通常需要隐藏导航栏、广告、按钮等无关内

一、基本语法

@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. 分页控制

避免内容被截断，控制分页位置。

@media print {
  /* 避免在 h2 标题前分页 */
  h2 {
    page-break-before: avoid;
  }
  /* 禁止在段落中间分页 */
  p {
    page-break-inside: avoid;
  }
  /* 在 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 */
    print-color-adjust: exact;
  }
}

三、完整代码实例

<!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>

四、关键注意事项

测试方法：
无需实际打印，用浏览器「打印预览」（快捷键 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 使用内容请搜索或继续浏览下面的相关文章，希望大家以后多多支持米米素材网！