我创建了一个CSS样式表,可以使用以下@media规则以横向模式打印
HTML页面：
@media print{
@page {size: landscape;}
}
我不想打印所有加载样式表的HTML页面在横向模式.理想情况下,我想要指定一个会这样做的景观类.
随着HTML的生成,我可以随时创建一个单独的landscape.css文件,并根据需要将其附加到头部,但是我希望有一个比较简单的方法可以使用类.
作为后续行动,我也没有运气尝试以下：
@page rotated {
size: landscape;
}
@media print{
.rotate {
page: rotated;
}
}
我可能只是在墙上跳动,只能看到在基于Webkit的浏览器中工作的解决方案. @page size：景观设置在Firefox中看起来不起作用(或惊喜,惊喜)ie10.
解决方法
不幸的是,我们目前无法使用页面类型选择器来超出以下提供的媒体查询：left,：right,：first,and：blank pseudo-classes.
https://www.w3.org/TR/css3-page/#page-selector-and-context
然而,W3C考虑为未来级别的CSS [@page：nth(4){…}或@page(.class){…}]添加其他页面伪类.我不知道为什么命名页面无法工作,但截至2016年1月26日,第4级媒体查询(包括@page at-rule)可能包括使用脚本的范围,否定和定制媒体查询.此外,目前仅在Chrome中支持size属性.
https://www.w3.org/TR/mediaqueries-4/
这是最接近的,我只能使用HTML和CSS,它将横向适用于偶数页面.我知道这不是一个确切的解决方案,它只适用于Chrome.
<html>
<head>
<style>
.landscape {
page-break-before: always;
}
@page :left {
size: landscape;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="landscape">This is in landscape form,following a page break.</p>
</body>
</html>
