HTML/CSS - benötigen unterschiedliche Positionen auf dem Bildschirm und auf der gedruckten Seite

Question

Ich habe eine HTML-und CSS-Datei, die verknüpft sind.

Ich habe 10 Bilder, in den CSS-Dateien sind diese speziell positioniert, um unter Verwendung von "position: absolute;"

Ich versuche jetzt, die Datei zu drucken, und möchte ein Bild pro Seite haben. Gibt es eine Möglichkeit, die "absolute" Position zu überschreiben und ein Bild auf eine Seite zu drucken?

Sollte ich 2 angefügte CSS-Dateien verwenden (@media Bildschirm & @media print)?

Jede Hilfe wird geschätzt!

Answer 1

Zunächst können Sie einen Blick auf Paged Media-Abfrage für mehr fancy stuff: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ und https://developer.mozilla.org/pl/docs/Web/CSS/@page

Die zweite Sache ist, wie HTML-Datei aufgebaut ist. Wenn von Hand, vielleicht könnten Sie es in separate Dateien teilen. Wenn Sie einen Code (wie Java, Python, PHP, Ruby, Js ...) verwenden, um HTML auszugeben, dann könnten Sie 2 Versionen entsprechend ausgeben, oder benutzen Sie bool "flag", um es nach Bedarf zu ändern.

Sie können auch versuchen, Paged Media und @media print zu kombinieren.

Mehrere @media-Regeln können in einer einzigen CSS-Datei enthalten sein, aber für größere Dinge ist es eine gute Übung, Dinge in mehreren Dateien zu speichern und nur mit Tools wie SASS oder LESS zu erzeugen.