Question

我在单页应用程序上工作。我想根据class的{{1}}以横向或纵向打印页面。最难的部分：我只想使用css，没有javascript。

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

div

但如果阻止@media print { @page { size: landscape } }具有修饰符"frame"

，我想调整大小

不幸的是，这不起作用：

"media"

Answer 1

如上所述，您无法使用@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。