如何在HTML中使用CSS

Translated

View the article in English

CSS的'screen'媒體類型主要用於計算機屏幕和類似設備上的顯示。當為「screen」媒體類型定義樣式時，它們會影響網頁內容在螢幕上的呈現方式，強調視覺設計和互動性。

相比之下，CSS 的 'print' 媒體類型是為了打印而設計的。它決定了網頁列印時的外觀，專注於優化列印頁面的內容。此優化可能包括調整字體大小、頁邊距以及移除或隱藏在列印時不相關或不必要的元素。

如何在 HTML 中使用響應式 CSS

下載適用於 CSS 和 HTML 整合的 IronPDF C# 程式庫
準備 HTML 檔案以轉換成 PDF
指定 CSS 媒體類型以獲得最佳 PDF 格式化效果
在 PDF 中設置 CSS 媒體類型「Print」以重複表格標頭
為響應式設計配置視口尺寸

開始使用 IronPDF

立即在您的專案中使用IronPDF，並享受免費試用。

第一步：

螢幕與列印 CSS 類型（CSS3）

IronPDF 可以在 C# 中從 HTML 生成 PDF，並且可以輕鬆地將螢幕樣式表默認渲染為 PDF。這很方便，因為列印樣式表通常沒有螢幕樣式表那麼有文檔記錄、使用或開發。

CSS3 允許某些 CSS 樣式僅在印刷文件中呈現，而其他樣式則專為網頁瀏覽器設計。 IronPDF可以編程以配合使用。

為您的 HTML 創建並應用列印樣式表：瞭解如何創建和應用完美的列印樣式表。.

很難說哪種CSS媒體類型更好，因為每種類型都針對不同的使用案例。值得透過反覆試驗來測試每一個，看看哪一個適合您的需求。

重複表格標題

處理跨多頁的 HTML 表格時，請將 CssMediaType 屬性設置為 PdfCssMediaType.Print。这确保了表格标题在每个延伸页面的顶部重复显示。相比之下，PdfCssMediaType.Screen 指示 Chrome 只打印一次頁首。

要確保Chrome能夠檢測到表格標題，它應該被包含在 <thead讓我們渲染 'tableHeader.html 重複表格標題的範例' 將 HTML 檔案轉換成 PDF 以查看效果。

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

VB C#