打印css-css3 - 如何定义 CSS 类以在纵向模式下设置复制页面？

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

AI导航——AI爱好者的聚集地！

编程之家搜集整理的这篇文章主要介绍css3——如何定义CSS类来设置竖屏模式的复制页面？ ，编程之家的小编觉得相当不错，现在分享给大家，也给大家一个参考。

我创建了一个 CSS 样式表，它使用以下 @media 规则以纵向模式复制页面：

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

我不想复制以纵向模式加载样式表的所有 HTML 页面。 理想情况下打印css，我想指定一个可以做到这一点的水景类。

生成 HTML 后，我始终可以创建一个单独的landscape.css 文件并根据需要将其附加到颈部，但我希望有一种更简单的方法可以使用类来完成此操作。

作为后续，我还尝试了以下方法，但没有成功：

@page rotated {
  size: landscape;
}
@media print{
  .rotate {
    page: rotated;
  }
}

我可能只是在墙上敲打打印css，只能看到适用于基于 Webkit 的浏览器的解决方案。 @page size: 横向设置看起来在 Firefox 中不起作用（或者令人惊讶的是，令人惊讶的）ie10。

解决方案

不幸的是，除了 :left 、 :right 、 :first 和 :blank 伪类提供的媒体查询之外，我们目前在使用页面类型选择器方面遇到了困难。

然而，W3C 考虑为未来的 CSS 级别添加其他页面伪类 [@page:nth(4){...} 或 @page(.class){...}]。 我不知道为什么命名页面很难使用，但截至 2016 年 1 月 26 日，4 级媒体查询（包括 @page at-rule ）可能包括使用脚本的范围、否定和自定义媒体查询。 此外，尺寸属性目前仅在 Chrome 中受支持。

这是最接近的，我只能使用 HTML 和 CSS，并且它将在主要页面的纵向中工作。 我知道这不是一个正确的解决方案，它只适用于 Chrome。

    
        
            .landscape {
                page-break-before: always;
            }
            @page :left {
                size: landscape;
            }
        
    
    
        
This is a normal paragraph.
        
This is in landscape form,following a page break.