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

Question

我有许多页面需要设置,以便在某些情况下打印默认为A4横向,而在其他情况下默认为A3纵向.

基于css打印样式的答案,我试图在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(可能很明显我没有太多线索)所以我会理解一些解释来解决我的误解.

我正在使用玉和引导程序

Answer 1

我不认为你可以将 CSS 嵌套在 div 下，就在媒体查询下。以下是一些未经测试的代码，改编自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;
    }
 }

您也可以查看/sf/answers/1023495791/