页面和打印预览在视觉上不匹配

Question

我正在处理HTML页面，当我查看页面时没有边距，因为我将边距和填充设置为0px;在我的CSS中。问题是当我打印预览时，它会显示浏览器设置的边距。

有没有办法在查看时可以为页面添加边距，但是在打印时它没有添加额外的边距空间？我的结局非常大。

Answer 1

使用css @media并创建不同的样式，以便在打印时以不同的方式查看/呈现内容

.my__class {
    font-size: 20px;
}

@media print {
    .my__class {
      font-size: 80px; // when you print .my__class will be 80px, but 20px on screen
    }
}

Answer 2

这是基本规则的一个简单示例：

  <style tyle="text/css">
  <!--
  @media print {
  body { font-size: 10pt }
  }

 @media screen {
  body { font-size: 12pt }
 }
 @media screen, print {
  body { line-height: 1.2 }
 }
 -->
 </style>