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

打印页面：第1页：A'B'

第2页：A''B''

无论如何都要处理这个问题？

Answer 1

如果我确实理解了你的意思：你必须声明一些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>

Answer 2

要为打印和屏幕定义不同的样式，请使用CSS @media规则。

@media print {
    /* 
       Style(s) for print
    */
}

@media screen {
    /* 
       Style(s) for screen
    */
}

@media all {
    /* 
       Style(s) for all media
    */
}

MDN @media

如何在媒体类型上设置html页面布局的依赖关系？

2 个答案: