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。