CSS 打印样式核心：@media print 与 @page 功能详解及实用示例

一、核心标签功能说明

1. @media print：打印场景样式隔离与控制

@media print 是 CSS3 媒体查询的核心语法，专门用于为打印设备或浏览器打印预览模式，定义与页面正常展示相隔离的专属样式，核心能力集中在打印内容的视觉与显隐控制：

• 精准控制打印时元素的显示与隐藏（如隐藏预览按钮、导航栏，强制显示水印、二维码）
• 覆盖浏览器默认打印行为（解决默认忽略背景色、边框色，自动添加网址 / 日期页眉页脚等问题）
• 自定义打印内容的排版、字体大小、颜色等样式，确保打印输出整洁规范
• 仅在触发打印或打印预览时生效，完全不影响页面的正常浏览样式

2. @page：打印纸张物理属性专属配置

@page 是仅能嵌套在 @media print 内部使用的特殊 CSS 规则，专门负责配置打印纸张的物理参数，不影响页面预览效果，核心能力如下：

• 指定打印纸张尺寸（支持 A3、A4、A5 等标准尺寸，也可自定义宽高）
• 自定义纸张上下左右边距，用于预留装订位、调整内容与纸张边界的间距
• 支持伪类（:first/:left/:right），为首页、奇数页、偶数页设置差异化边距，适配双面打印、画册打印等复杂场景
• 仅作用于打印输出环节，是实现精准纸张排版的核心标签

二、核心实用示例（直接复用）

示例 1：基础组合使用（A4 纸 + 标准打印样式）

/* @media print 包裹所有打印专属样式 */
@media print {
  /* 1. 元素显隐控制：隐藏无用控件，显示打印必备元素 */
  .preview-control, .nav-bar, .operation-btns {
    display: none !important; /* 隐藏预览缩放、导航栏等非打印元素 */
  }
  .bill-content, .watermark, .custom-page-num, img {
    display: block !important; /* 强制显示单据内容、水印等核心元素 */
    visibility: visible !important;
    max-width: 100% !important;
  }

  /* 2. 样式保真：强制保留背景色与边框 */
  body, .bill-box, .table-cell {
    -webkit-print-color-adjust: exact; /* 兼容Webkit内核浏览器 */
    print-color-adjust: exact; /* 标准属性，覆盖默认不打印背景的行为 */
    border-color: #333 !important;
    background-color: #fff !important;
  }

  /* 3. @page 配置：A4纸 + 自定义边距 */
  @page {
    size: A4; /* 锁定纸张为A4标准尺寸（等价于 210mm 297mm） */
    margin: 1cm 2cm; /* 上下1cm边距，左右2cm边距，预留装订位 */
  }

  /* 4. 首页特殊配置：更大顶部边距 */
  @page :first {
    margin-top: 5cm; /* 首页顶部边距5cm，其他页保持1cm */
  }

  /* 5. 打印文字样式优化 */
  body {
    font-size: 12pt; /* pt单位更适配打印场景 */
    color: #333;
    margin: 0 !important;
    padding: 0 !important;
  }
}

示例 2：自定义纸张尺寸 + 无边距打印

@media print {
  /* 隐藏打印按钮 */
  .print-btn {
    display: none !important;
  }

  /* @page 自定义纸张 + 无边距配置 */
  @page {
    size: 200mm 300mm; /* 自定义纸张：宽200mm，高300mm（先宽后高） */
    margin: 0; /* 无边距打印，内容铺满整张纸张 */
  }

  /* 水印样式配置（打印时强制显示） */
  .watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    pointer-events: none;
    display: block !important;
  }
}

示例 3：极简使用（仅控制元素显隐 + 默认 A4 纸）

@media print {
  /* 隐藏不需要打印的元素 */
  .header, .footer, .advert, .edit-btn {
    display: none !important;
  }

  /* 强制显示打印核心元素 */
  .receipt-info, .qr-code, .order-list {
    display: block !important;
    visibility: visible !important;
  }

  /* @page 默认A4纸配置 */
  @page {
    size: A4; /* 纸张尺寸锁定A4，边距使用浏览器默认值 */
  }
}

三、关键注意事项

1. 嵌套依赖：@page 必须放在 @media print 内部，单独使用无效
2. 样式优先级：打印样式建议添加 !important，确保覆盖页面默认样式
3. 单位选择：@page 配置纸张时，优先使用 mm/cm（物理单位），比 px 更适配打印场景
4. 兼容性：两者兼容所有现代浏览器（Chrome/Firefox/Edge）及 Uni-app H5/App 端，无需第三方插件