html - 根据 css 中特定元素的类更改打印页面大小

Question

我开发的是单页应用程序。我想根据 div 的 class 横向或纵向打印页面。最难的部分:我只想使用 css，不使用 javascript。

例如，我有一个默认的打印尺寸

@media print {
  @page {
    size: landscape
  }
}

但如果 block "frame" 有修饰符 "media"，我想调整它的大小

不幸的是，这是行不通的:

@media print {
  @page .frame ._media {
    size: portrait
  }
}

Answer 1

您不能像您提到的那样使用 @page 添加选择器。只能添加一些伪类。您可以在这里阅读更多关于它们的信息:

https://developer.mozilla.org/en/docs/Web/CSS/@page

最好的解决方案是使用 JS。但由于您只想使用 CSS 来完成。

您无法使用类设置@page 规则。

我的解决方案是:有两个不同的样式表(比如 style1.css，style2.css)，在你有 class1 的页面上包含 style1.css，在你有 class2 的页面上包含 style2.css。

style1.css:

@media print {
  @page {
    size: landscape
  }
}

和 style2.css:

@media print {
  @page {
    size: portrait;
  }
}

这是您可以设置两个不同的@page 规则的唯一方法。

否则请使用 Javascript。