如何在媒體類型上設置html頁面佈局的依賴關係？

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''。如何在媒體類型上設置html頁面佈局的依賴關係？

屏幕：A B

打印頁：第1頁：A'B」

第2頁：A''B'

反正是有解決這個問題？

來源

2015-04-16 Jakub

如果我沒有正確理解你的意思：你必須聲明一些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>

來源

2015-04-16 11:40:12

我想有某事像這樣：如果（在屏顯示），然後按此順序顯示部分：A'A''B'B「」如果（印刷）顯示部分A 'B'在第一頁上;第二頁上的部分A''B「。所以，你的建議可能會被用來解決這個問題，但我正在尋找其他更有效的解決方案。 – Jakub

@Jakub現在，我明白你的意思。檢查更新的答案。 –

定義不同風格的打印和屏幕，使用CSS @media規則。

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

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

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

MDN @media

來源

2015-04-16 12:05:17 timbernasley

如何在媒體類型上設置html頁面佈局的依賴關係？

回答

相關問題