HTML/CSS - 需要在屏幕和打印页面上的不同位置

Question

I have a HTML and CSS file which are linked.

I have 10 images, in the CSS files these are specifically positioned to display one under the other on screen using "position: absolute;"

I am now trying to print the file, and want to have one image per page. Is there any possible way of overriding the "absolute" position and printing one image to a page?

Should I be using 2 attached CSS files (@media screen & @media print)?

Any help appreciated!

Answer 1

First You can take a look at Paged Media query for more fancy stuff: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ and https://developer.mozilla.org/pl/docs/Web/CSS/@page

Second thing is how HTML file is constructed. If by hand, maybe You could split it into separate files. If You using some code (like Java, Python, Php, Ruby, Js...) to output HTML then You could output 2 versions accordingly, or use bool "flag" to change it as needed.

You can also try to combine Paged Media and @media print.

Multiple @media rules can be in single CSS file, though of course for bigger thing a good practice is to keep things in multiple files and only output as one with tools like SASS or LESS.