Wie kann ich eine HTML-Seite so gestalten, dass sie im A4-Format gedruckt wird?

So entwerfen Sie eine HTML-Seite mit A4-Papierabmessungen

Viele Benutzer wünschen sich die Möglichkeit, eine HTML-Seite zu drucken, die die Abmessungen und Ränder nachahmt eines A4-Blatts. In diesem Artikel werden die Techniken untersucht, die erforderlich sind, um diesen Effekt zu erzielen.

CSS-Medienabfragen für den Druck

Der Schlüssel zur Steuerung der gedruckten Abmessungen einer HTML-Seite liegt in der Verwendung von CSS-Medien Abfragen. Diese Abfragen zielen auf das Printmedium ab und ermöglichen die Anwendung spezifischer Stile. Für den Druck im A4-Format kann die folgende @media-Abfrage verwendet werden:

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

Dieser Code legt die Breite und Höhe der gedruckten Seite auf 21 cm bzw. 29,7 cm fest, was einer A4-Seite entspricht. Darüber hinaus werden Ränder von 30 mm (oben und unten) und 45 mm (links und rechts) definiert, um die gewünschten Seitenabmessungen zu erreichen.

Nachfolgende Seitenumbrüche

Wenn der HTML Wenn der Inhalt die angegebene Seitengröße überschreitet, müssen Folgeseiten erstellt werden. Dies kann durch das Einfügen von CSS-Seitenumbrüchen erreicht werden. Zum Beispiel:

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

Dieser Code stellt sicher, dass jedes Kapitel auf einer neuen Seite beginnt.

Browseranzeige

Zur Optimierung der Webdarstellung von Erstellen Sie eine separate Web-CSS-Datei oder überschreiben Sie Teile des Druck-CSS, um die Seite unter Beibehaltung der gedruckten A4-Abmessungen zu vergrößern. Zum Beispiel:

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

Dieser Code legt die angezeigte Breite auf 80 % des verfügbaren Browserraums fest, mit automatischer Höhenanpassung. Für ein webfreundlicheres Layout werden auch die Ränder auf 20 Pixel reduziert.

Fazit

Durch die Implementierung von CSS-Medienabfragen und die Verwaltung von Seitenumbrüchen ist es möglich, eine zu erstellen HTML-Seite, die sich beim Drucken wie ein A4-Dokument verhält. Durch die Trennung von Druck- und Web-CSS kann die Seite auch eine optimierte Anzeige für verschiedene Anzeigeumgebungen beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann ich eine HTML-Seite so gestalten, dass sie im A4-Format gedruckt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!