Wie man CSS mit HTML verwendet
Der CSS-Medientyp "screen" ist in erster Linie für die Anzeige auf Computerbildschirmen und ähnlichen Geräten gedacht. Wenn Stile für den Medientyp "Bildschirm" definiert werden, wirken sie sich darauf aus, wie Webinhalte auf Bildschirmen dargestellt werden, wobei die visuelle Gestaltung und Interaktivität im Vordergrund stehen.
Im Gegensatz dazu ist der CSS-Medientyp "print" für den Druck bestimmt. Sie legt fest, wie die Webseite im Druck erscheinen wird, wobei der Schwerpunkt auf der Optimierung des Inhalts für die gedruckte Seite liegt. Diese Optimierung kann die Anpassung von Schriftgrößen und Rändern sowie das Entfernen oder Ausblenden von Elementen umfassen, die beim Druck nicht relevant oder notwendig sind.
Wie man Responsive CSS mit HTML verwendet
- Laden Sie die IronPDF C#-Bibliothek für die Integration von CSS und HTML herunter
- Vorbereiten der HTML-Datei für die Konvertierung in PDF
- CSS-Mediatyp festlegen für optimale PDF-Formatierung
- CSS-Mediatyp „Drucken“ für sich wiederholende Tabellenüberschriften in PDFs festlegen
- Konfigurieren Sie die Ansichtsfenstergrößen für responsives Design
Erste Schritte mit IronPDF
Beginnen Sie noch heute mit der Verwendung von IronPDF in Ihrem Projekt mit einer kostenlosen Testversion.
CSS-Typen für Bildschirm und Druck (CSS3)
IronPDF generiert PDFs aus HTML in C# und kann standardmäßig mühelos ein Bildschirm-Stylesheet in ein PDF rendern. Dies ist praktisch, da Stylesheets für den Druck im Vergleich zu ihren Pendants für den Bildschirm oft weniger gut dokumentiert, verwendet oder entwickelt werden.
Mit CSS3 können bestimmte CSS-Stile ausschließlich in gedruckten Dokumenten wiedergegeben werden, während andere für Webbrowser bestimmt sind. IronPDF kann so programmiert werden, dass es entweder mit.
Erstellen und Anwenden eines Druckstylesheets für Ihr HTML: Erfahren Sie, wie Sie ein perfektes Druckstylesheet erstellen und anwenden..
Es ist sehr schwer zu sagen, welcher CSS-Medientyp besser ist, da jeder Typ auf unterschiedliche Anwendungsfälle abzielt. Es lohnt sich, durch Ausprobieren herauszufinden, welche für Ihren Bedarf geeignet ist.
Wiederholung der Tabellenüberschriften
Wenn Sie mit HTML-Tabellen arbeiten, die sich über mehrere Seiten erstrecken, setzen Sie die CssMediaType-Eigenschaft auf PdfCssMediaType.Print. Dadurch wird sichergestellt, dass die Tabellenüberschrift am Anfang jeder erweiterten Seite wiederholt wird. Im Gegensatz dazu weist PdfCssMediaType.Screen Chrome an, die Überschriften nur einmal zu drucken.
Um sicherzustellen, dass Chrome die Tabellenüberschrift erkennt, sollte sie in einem <thead>-Tag eingeschlossen werden. Lassen Sie uns die 'tableHeader.html Beispiel der sich wiederholenden Tabellenköpfe' HTML-Datei in PDF rendern, um den Effekt zu sehen.
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.csusing 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")
