时间戳

首页 > 解决方案 > 是否可以在 css 文件中打印多个 @media

css - 是否可以在 css 文件中打印多个 @media

问题描述

我想在一个 CSS 文件中有 2 种不同的 @page 和 @media 打印样式。它也可以是分开的。为什么我需要 2 是我正在打印条形码，并且打印时页面需要不同的尺寸。目前正在发生的事情是它对两个条形码都使用样式 1 样式。如果它仅对Barcode1使用样式 1 样式，对Barcode2使用样式2，我该如何设置。

代码：CSS

**style 1**
    @page { size: 8cm 3cm; margin-top: 16px; } /* output size */
    body.receipt1 .sheet1 { width: 10cm; height: 3cm; margin-left: 35px; } /* sheet size */
    @media print { body.receipt1 { width: 3cm } } /* fix for Chrome */

**style 2**
    @page { size: 10cm 5cm; margin-top: 16px; } /* output size */
    body.receipt2 .sheet2 { width: 12cm; height: 5cm; margin-left: 35px; } /* sheet size */
    @media print { body.receipt2 { width: 5cm } } /* fix for Chrome */

条码1

<body className="receipt1">
          <section className="sheet1">
            <table className="table_b10">
            <tbody>
              <tr>
                <td className="heading1_b10">Worksgroup</td>
              </tr>
              <tr>
                <td className="heading2_b10">SKU: {this.props.stateInfo.itemName}</td>
              </tr>
              <tr>
                <td className="heading2_b10">
                  <Barcode value={this.props.stateInfo.itemName} width={1} height={30} fontSize={0} margin={0} format="CODE128" />
                </td>
              </tr>
              <tr>
                <td className="heading2_b10">{this.props.stateInfo.itemDescription}</td>
              </tr>
              <tr>
                <td className="heading2_bb10">LOG-ID: {this.props.audit.id}</td>
              </tr>
            </tbody>
          </table> 
        </section>
      </body>

条码2

<body class="receipt2">
    <section class="sheet2">
          <table className="table_b5">
          <tbody>
            <tr>
              <td className="heading1_b5">Worksgroup</td>
            </tr>
            <tr>
              <td className="heading2_b5">Job No\PO:</td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.job.jobNumber}</td>
            </tr>
            <tr>
              <td className="heading2_b5">SKU:</td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.stateInfo.itemName}</td>
            </tr>
            <tr>
              <td className="heading3_b5">
                <Barcode value={this.props.stateInfo.itemName} width={0.75} height={25} fontSize={0} margin={0} format="CODE128" />
              </td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.stateInfo.itemDescription}</td>
            </tr>
            <tr>
              <td className="heading3b_b5">LOG-ID: {this.props.audit.id}
              </td>
            </tr>
          </tbody>
        </table>
        </section>
      </body>

标签： cssreactjs

解决方案

推荐阅读