在瀏覽網頁時如果想要將目前畫面列印出來,一般會使用瀏覽器預設的列印功能 (ctrl + P),但是版面要是沒有特別調整過,通常預覽狀況都是慘不忍睹,實際上在 CSS 的世界中不只是針對螢幕頁面調整版型,我們還可以對列印版面調整。

 

@media print

@media print 指令看起來格式很眼熟,寫 RWD 的時候有一個東西叫 @media screen,簡單來說, @media screen 指令中寫的是關於螢幕部份的約束及要求,像是可以自訂在特定螢幕尺寸時某些區塊要隱藏或是顯示,相對的使用 @media print 就可以針對列印時的畫面來做調整,列印時不要的區塊,隱藏它就好了,而格式不符合紙張閱讀的,也可以任意調整。

@media print {
    #video {
        display: none;
    }
    
    #table {
        font-size: 15px;
        line-height: 20px;
    }    
}

 

@page

配合 @media print 指令,我們還可以使用 @page 指令自定列印時的紙張設定,像是紙張大小、內容與紙張的邊界距離、直印橫印等等。

@page {
    /* A4 直式列印 */
    size: A4 portrait; 
    margin: 40px;
}

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料