Question

我有很多页面需要设置，以便在某些情况下打印默认为A4横向，而在其他情况下默认为A3肖像。

根据css print styling中的答案，我试图在print.less文件中设置以下内容

@media print{

  .print-portrait-a3 {
    @page {
      size: A3 portrait;
      margin: 0.5cm;
    }
  }

  .print-landscape-a4 {
    @page {
      size: A4 landscape;
      margin: 0.5cm;
    }
  }

  .print-portrait-a4 {
    @page {
      size: A4 portrait;
      margin: 0.5cm;
    }
  }
}

然后我将.print-portrait-A3类等放在我打印的页面顶部，试图让它们打印到不同的页面大小。

然而，我无法让这个工作 - 无论哪个是我的CSS中的最后一个样式是被所有页面使用的样式。

我只是刚开始使用CSS（可能很明显我没有太多线索）所以我会理解一些解释来解决我的误解。

我正在使用jade和bootstrap

Answer 1

我不认为你可以在一个div下嵌入CSS，只是在媒体查询下。以下是一些根据http://www.w3.org/TR/css3-page/#page-size-prop改编的未经测试的代码：

/* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page .print-landscape-a4 {
       margin: 3cm;
       size: A4 landscape;
    }
 }

您也可以查看https://stackoverflow.com/a/14621368/1584531

我可以使用CSS为不同的页面设置不同的默认打印页面大小

1 个答案: