Question

我正在使用一个应用程序以potrait和landscape模式一起打印页面。一些页面正在potrait中打印，一些页面是在potrait中打印。在potrait或landscape中打印页面看起来都不错，但是在potrait和landscape中打印页面在一起会使带有Potrait的页面变得拥挤。

这是正在使用的媒体查询，

@media print {

    html {
        max-width: none;
        width:100%;
        float:left;
    }

    #nav-wrapper {
        display: none;
    }


    div.pageBreak {
        page-break-after: always !important;
    }


    @page{
        size: auto;
        margin: 0;
    }


    .landscape1 {
        transform-origin: top left;
        transform: translateY(1850px) rotate(-90deg);
        overflow-x: hidden;
        width: 1850px !important;
    }

    }

Answer 1

媒体查询根据设备的方向进行匹配：

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

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

以这种方式工作。

OR

也许您可以尝试在线尝试过的这个自定义CSS。

这是适用于大多数浏览器（Chrome，Firefox，IE9 +）的正确CSS。

首先将正文页边距设置为0，因为否则页边距将大于您在“打印”对话框中设置的页边距。还设置背景颜色以使页面可视化。

body {
  margin: 0;
  background: #CCCCCC;
}

边距，边框和背景是可视化页面所必需的。

填充必须设置为所需的打印边距。在打印对话框中，您必须设置相同的页边距（在本示例中为10mm）。

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

A4页面的尺寸为210mm x 297mm。您需要从尺寸中减去打印边距。并设置页面内容的大小：

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

我使用276mm而不是277mm，因为不同的浏览器对页面的缩放略有不同。因此，其中一些将在两页上打印277毫米高的内容。第二页将为空。使用276mm更安全。

我们在打印页面上不需要任何边距，边框，内边距，背景，因此请将其删除：

@media print {
  body {
    background: none;
    -ms-zoom: 1.665;
  }
  div.portrait, div.landscape {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  div.landscape {
    transform: rotate(270deg) translate(-276mm, 0);
    transform-origin: 0 0;
  }
}

请注意，变换的原点是0 0！另外，横向页面的内容必须向下移动276mm！

如果您同时使用纵向和横向页面，IE也会缩小页面。我们通过将-ms-zoom设置为1.665来修复它。如果将其设置为1.6666或类似的内容，有时页面内容的右边框可能会被裁剪。

如果需要IE8或其他旧版浏览器支持，则可以使用-webkit-transform，-moz-transform，filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）。但是对于足够现代的浏览器来说，则不是必需的。

你很好！！

样式在打印中变得混乱

1 个答案: