横向打印的媒体查询？

Posted 2023-03-06

【中文标题】横向打印的媒体查询？

【英文标题】：Media queries for landscape printing?

【发布时间】：2013-05-11 21:50:16

【问题描述】：

我有一些专门用于打印的样式，这些样式已通过打印媒体查询正确应用。问题是，如果您切换到横向打印，我的布局会有点中断，我想为此调整一些东西。有什么方法可以定义横向打印的样式吗？

【问题讨论】：

您是否尝试过将(orientation: landscape) 媒体查询与print 结合使用？

哇，不，由于某种原因我没有尝试过。奇迹般有效。让它成为一个答案，我会接受它。

【参考方案1】：

媒体查询提供与设备方向的匹配：

@media print and (orientation: landscape) 
    /* landscape styles */


@media print and (orientation: portrait) 
    /* portrait styles */

【讨论】：

在 chrome 中可以工作，至少在我正在测试的版本中。

很遗憾，这不适用于当前版本的 Chrome。

【参考方案2】：

<style>
    @media print 
        @page 
            size: landscape; /*automatically set to Landscape only*/
        
    
</style>

如果您想让用户在两种方式之间进行选择：纵向/横向，请执行以下操作：

 <style type="text/css" media="print">
        @page 
            /* portrait/Landscape */
            size: auto;
           /*adding some margins to let the title and the date to be displayed*/
            margin: 40px 10px 35px; 
        
  </style>