html窗口化页面后排版混乱,html - 样式在打印中变得混乱 - 堆栈内存溢出

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

@media print and (orientation: landscape) {

/* landscape styles */

}

@media print and (orientation: portrait) {

/* portrait styles */

}

以这种方式工作。

要么

也许您可以尝试在线尝试过的此自定义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 {

<