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

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
    }
}