当前位置: 首页 > article >正文

CSS @media print 使用详解

@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


四、关键注意事项

  1. 测试方法
    无需实际打印,用浏览器「打印预览」(快捷键 Ctrl/Cmd + P)即可调试。

  2. 单位选择
    建议用 pt(点)、cm/mm(物理单位)而非 px,更符合纸张尺寸。

  3. 覆盖默认样式
    打印样式可能需要 !important 覆盖原有样式(但尽量少用)。

  4. 背景颜色处理
    浏览器默认不打印背景色,如需显示需强制设置:

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


http://www.kler.cn/a/590134.html

相关文章:

  • Flutter_学习记录_状态管理之GetX
  • 通过物联网与可视化技术搭建的智慧工地管理云平台,java智慧工地源代码,企业级源码
  • OpenManus 架构的详细技术实现
  • 算法——图论——最短路径(多边权)
  • 优化VsCode终端样式
  • 【前端动态列表渲染:如何正确管理唯一标识符(Key)?】
  • 设计模式Python版 模板方法模式(下)
  • React封装axios请求方法
  • 新能源电站系统建设提速!麒麟信安操作系统驱动光伏风电双领域安全升级
  • 【css酷炫效果】纯CSS实现立体纸张折叠动效
  • 机器学习_重要知识点整理
  • 双3060、Ubuntu22.04、cuda12.8安装deepseek 32b-Q8
  • 从零开始开发纯血鸿蒙应用之无框截图
  • 轨道交通3U机箱CPCI电机控制板(DSP),主要运行控制算法以对牵引电机进行精准的运动控制
  • 深度学习:分类和回归的区别
  • DOM4J解析XML, 修改xml的值
  • 独立部署DeepSeek 大语言模型(如 DeepSeek Coder、DeepSeek LLM)可以采用什么框架?
  • 蓝桥杯小球碰撞
  • 蓝桥杯 刷题统计
  • Appium使用文档