Question

我有一些专门用于打印的样式，这些样式正在通过打印介质查询正确应用。问题是，如果你切换到横向打印，我的布局会有所不同，我想为它调整一些东西。有没有办法为横向打印定义样式？

Answer 1

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

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

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

Answer 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>

媒体查询横向打印？

2 个答案: