Question

我的页面显示的形式在@screen-tablet处从水平到垂直断开，大约为~760px。 A4页面宽度大约为 ~600px 。

在我的print.css中，我缩小了所有文字，例如font-size:85%，以便所有默认字体大小为14将在12左右打印。我还想显示格式它是水平状态，意思是 - viewport > 760px。问题是打印布局将页面宽度设置为A4 ~600px ，导致表格垂直显示。

有没有办法“愚弄”布局，认为它超过760px？

（我希望得到一个不需要为打印设置全新布局的答案 - 只是让它看起来就像在桌面上一样）。

Answer 1

将transform属性与媒体查询print类型配合使用，例如：

@media print {
  html {
    transform: scale(0.8);
  }
}

这将允许您缩放文档而无需重排内容。

的 CODEPEN Example

transform Functionality Explained

Answer 2

为此，您可以使用@media后跟任何

@media screen，@media print，@media screen, print

通过在绘制时定义任何样式的状态，您可以在@media screen, print上定义可以适用于文档范围的每个规则。

您希望将视口冻结为700px，然后可以为@media print定义@media screen,print and (min-width<=760px) { body,html{ min-width:700px;max-width:700px; }}规则。它将视口定义并设置为特定点。

注意：此规则也可用于其他工作，例如transform和 zoom作为一个方面。

Answer 3

我通过为打印定义了单独的CSS Rules处理了此问题。您可以通过JavaScript或通过Media query使用两个选项。

function printForMe()
{
  var mywindow = window.open('', 'Print Proposal', 'height=400,width=600');
  mywindow.document.write('<html><head><style>div{font-size:7pt;display:block;}body{padding:10pt;} .xt-print-box{page-break-inside: avoid !important;} a[href]:after { content:none !important; }</style>');
  mywindow.document.write($("head").html()); //Skip this line if you want to completely rewrite the styles and scripts therein header.
  mywindow.document.write('</head><body>');
  mywindow.document.write($("#myContent").html());
  mywindow.document.write('</head><body>');
  mywindow.print();
}

@media print { 
  div{font-size:7pt;display:block;}
  body{padding:10pt;} 
  .xt-print-box{page-break-inside: avoid !important;} 
  a[href]:after { content:none !important; }
}

使用引导网格强制打印布局的视图端口大小

3 个答案: