頁面和打印預覽的視覺效果不匹配

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>