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

Question

我有一个链接的 HTML 和 CSS 文件。

我有 10 张图片，在 CSS 文件中，这些图片被专门定位为使用“position: absolute;”在屏幕上显示一张在另一张下面

我现在正在尝试打印文件，并且希望每页有一张图像。是否有任何可能的方法来覆盖“绝对”位置并将一个图像打印到页面上？

我应该使用 2 个附加的 CSS 文件(@media screen 和@media print)吗？

感谢任何帮助!

Answer 1

首先，您可以查看 Paged Media query 以获得更多花哨的内容:https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/和 https://developer.mozilla.org/pl/docs/Web/CSS/@page

第二件事是 HTML 文件是如何构建的。如果用手，也许你可以把它分成单独的文件。如果您使用某些代码(如 Java、Python、Php、Ruby、Js...)输出 HTML，那么您可以相应地输出 2 个版本，或者使用 bool "flag"根据需要更改它。

您也可以尝试结合使用 Paged Media 和 @media print。

多个@media 规则可以在单个 CSS 文件中，当然，对于更大的事情，一个好的做法是将内容保存在多个文件中，并且只使用 SASS 或 LESS 等工具输出一个文件。