HTML/CSS - 画面上と印刷ページ上で異なる位置が必要

Question

リンクされているHTMLファイルとCSSファイルがあります。

私は10個の画像を持っていますが、CSSファイルでは、これらの画像は、「position：absolute;

私は今、ファイルを印刷しようとしており、ページごとに1つのイメージを持っています。 「絶対的な」位置を無効にして1つのイメージをページに印刷する方法はありますか？

@添付のCSSファイル（@media画面& @media print）を使用する必要がありますか？

Answer 1

まずあなたはもっと派手なもののためのページ媒体のクエリを見てみることができます：https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/とhttps://developer.mozilla.org/pl/docs/Web/CSS/@page

第二のものは、HTMLファイルが構築される方法です。手であれば、別のファイルに分割することもできます。 HTMLを出力するためにいくつかのコード（Java、Python、Php、Ruby、Js ...など）を使用している場合は、それに応じて2つのバージョンを出力するか、必要に応じてbool "flag"を使用します。

ページメディアと@mediaプリントを組み合わせてみることもできます。

複数の@mediaルールは、単一のCSSファイルに入れることができますが、もちろん、もっと大きなことは、複数のファイルに物事を保持し、SASSやLESSのようなツールでのみ出力することです。