CSS Media Query Print

一、什麼是CSS Media Query Print?

CSS Media Query Print是CSS3中提供的一種媒體查詢方式，用於控制網頁的打印樣式，使得在打印的時候，網頁的布局、排版、顏色等可以得到更好的控制，並提高打印效果。

在網頁設計中，我們通常可以使用media query來適配不同的設備，例如：PC端、移動端等。同樣，在打印的情況下也可以通過設置不同的樣式表，以適配不同的打印機和打印方式。

使用CSS Media Query Print，我們可以將特定樣式表應用於打印，而在網頁瀏覽的時候則使用其他樣式表。這樣用戶可以通過瀏覽網頁的方式，來查看美觀的網頁設計，而打印出來的實體文件則可以是更加具有可讀性的文件。

二、如何使用CSS Media Query Print?

為了在打印時應用特定的樣式表，需要在打印樣式表（print stylesheets）中添加media屬性，以指定文檔目前打開的文檔視口（viewport）是基於什麼方式進行渲染。

在CSS Media Query Print中，我們可以為特定的媒體打印類型（print media type）創建一個獨立的樣式表，這種方式可以通過以下方式實現：

    
        <link rel="stylesheet" media="print" href="print.css">
    

這裡的media屬性值設置為print，表示這個樣式表只有在打印時才會生效。此外，我們還可以指定其他的媒體類型，例如：screen、tv、projection等，每個媒體類型都對應一個媒體查詢，可以在打印時使用不同的樣式表。

我們還可以直接在樣式表中添加@media指令，來創建一些特定的打印樣式，例如修改背景顏色、隱藏某些元素以及改變字體顏色和大小等。

    
        @media print {
            body {
                background-color: #fff;
            }
            #header, #footer {
                display: none;
            }
            p {
                color: #000;
                font-size: 12px;
            }
        }
    

在這個示例中，我們使用@media指定的媒體類型為print，然後針對這個媒體類型在樣式表中添加了一些打印樣式。例如，將背景色設定為白色，隱藏頭部和底部，在打印時修飾段落的字體和顏色等。

三、幾個常用的打印樣式技巧

1、隱藏特定DOM元素

在不同的設備上，我們可能需要隱藏某些DOM元素，來適應用戶的需求。類似地，在打印的情況下，我們可能會需要隱藏某些元素工具條，以便得到更加乾淨的頁面排版。

    
        @media print {
            .no-print {
                display: none;
            }
        }
    

在這個示例中，我們為no-print class添加屬性 display:none，從而將這些元素隱藏掉。

2、控制頁面分頁

打印永遠需要掌控在手，而無需任何緊急電力供應，也就是說，打印永遠都不會像HTML一樣自動換行。通常我們需要對打印頁創建一些CSS樣式來提供更好的控制。

    
        @media print {
            .page-break {
                page-break-after: always;
            }
        }
    

在這個示例中我們創建了一個.page-break類，通過添加page-break-after屬性，控制每頁的分頁效果。

2、控制文本的折行

當在打印機上打印時，很容易出現字母、字形之間斷開的情況。這是由於打印時的分辨率比電腦屏幕分辨率低而導致的。在CSS中，我們可以通過添加word-wrap屬性，來控制折行效果，以保證打印的內容更加清晰。

    
        @media print {
            p {
                word-wrap: break-word;
            }
        }
    

在上述示例中，我們用 word-wrap:break-word創建了一個打印樣式，使用到了 word-wrap特定屬性。

四、結束語

CSS Media Query Print是一種極其重要的技術，能夠幫助Web開發者控制網頁的打印格式和效果，提高用戶體驗。在本文中我們講解了CSS Media Query Print的使用方法，以及附帶了三個常見的打印樣式的技巧。希望這些技巧可能對您在未來的工作中有所幫助，並為您的工作節省時間和增加效率。