html - 如何设置 html 页面布局对媒体类型的依赖？

Question

A、B 是 html 中的部分(创建为表格)。我需要在屏幕上以某种方式显示它们，在打印品上以另一种方式显示它们。此外，A 和 B 有两个子部分:A', A'' 和 B', B''(其中每个子部分都是非空的并且 A=A'A''；B=B'B'' 这意味着 A等于 A' 后跟 A''(B 相同))。 在屏幕上，我想先显示 A，然后再显示 B(这里的小节不相关)。 在打印时我想要 2 页，其中第一页包含 A'、B' 部分(按给定顺序)，第二页包含 A''、B''。

屏幕:A B

打印页面: 第一页:A'B'

第二页:A''B''

有什么办法可以解决这个问题吗？

Answer 1

如果我没有正确理解您的意思:您必须声明一些 CSS 来隐藏屏幕上的部分，并声明一个特定的 CSS 来添加分页符:

@media screen {
    .print-only {
        display: none;
    }
}

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

然后你就可以使用它们了:

<article>
    <section class="print-only">A'</section>
    <section class="print-only">B'</section>
    <span class="print-only page-break></span>
    <section class="print-only">A''</section>
    <section class="print-only">B''</section>
</article>

所有部分在打印时(仅)可见，并且在 A'B' 和 A''B'' 之间会有一个分页符。现在你必须改变他们的顺序。这不是可移植的(您可能需要使用供应商特定的前缀(-moz、-ms、-webkit)，这里我展示了 CSS3语法:

@media screen {
    .print-only {
        display: none;
    }
}

@media print {
    article {
        display: box;
    }

    section {
        box-orient: vertical;
    }

    .first-page {
        box-ordinal-group: 1;
    }

    .first-page:last {
        page-break-after: always;
    }

    .second-page {
        box-ordinal-group: 2;
    }
}

您的 HTML 将是:

<article>
    <section class="first-page">A'</section>
    <section class="second-page">B'</section>
    <section class="first-page">A''</section>
    <section class="second-page">B''</section>
</article>