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

【问题标题】：Can I use CSS to set up different default print page sizes for different pages我可以使用 CSS 为不同的页面设置不同的默认打印页面大小吗
【发布时间】：2014-04-27 05:38:18
【问题描述】：

我想设置一些页面，以便在某些情况下默认为 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 开始（可能很明显我没有太多线索），所以希望能得到一些解释来解决我的误解。

我正在使用玉和引导

【问题讨论】：

标签： css twitter-bootstrap pug

【解决方案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;
    }
 }

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

【讨论】：