如何設計 HTML 頁面以 A4 尺寸列印？

如何設計具有A4 紙張尺寸的HTML 頁面

許多用戶希望能夠列印模仿尺寸和邊距的HTML 頁面A4 尺寸的紙張。本文探討了實現此效果所需的技術。

用於列印的 CSS 媒體查詢

控制 HTML 頁面列印尺寸的關鍵在於利用 CSS 媒體查詢。這些查詢針對印刷媒體並允許套用特定樣式。對於A4尺寸的列印，可以使用以下@media查詢：

@media print {
    body {
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm;
    }
}

此程式碼將列印頁面的寬度和高度分別設定為21厘米和29.7厘米，對應於A4頁面。此外，它還定義了 30 毫米（頂部和底部）和 45 毫米（左側和右側）的邊距，以實現所需的頁面尺寸。

後續分頁符號

如果 HTML內容超出指定的頁面大小，必須建立後續頁面。這可以透過插入 CSS 分頁符號來完成。例如：

div.chapter {
    page-break-after: always;
}

此程式碼確保每個章節都從新頁面開始。

瀏覽器顯示

最佳化網頁顯示頁面，同時保持列印的 A4 尺寸，建立單獨的 Web CSS 檔案或覆蓋列印 CSS 的部分內容。例如：

@media screen {
    body {
        width: 80%;
        height: auto;
        margin: 20px;
    }
}

此程式碼將顯示寬度設定為可用瀏覽器空間的 80%，並自動調整高度。邊距也減少到 20 像素，以獲得更適合網路的佈局。

結論

透過實作 CSS 媒體查詢和管理分頁符，可以建立一個列印時 HTML 頁面的行為類似於 A4 尺寸的文件。透過分離列印和網頁CSS，頁面還可以針對不同的觀看環境保持最佳化的顯示。

以上是如何設計 HTML 頁面以 A4 尺寸列印？的詳細內容。更多資訊請關注PHP中文網其他相關文章！