页面预览和打印预览不匹配。

Question

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

是否有一种方法可以在页面查看时添加页边距，但在打印时不添加额外的页边距空间？我以相当大的差距结束了。

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>