CSS3 print 列印紙張大小分頁邊框大小方法

11 月 18, 2015 | CSS, | 0 comments

CSS3列印解決許多問題,如@media print可對列印頁面做不同的CSS顯示,設定邊框與頁輸出列印的紙張大小調用,都可以很客製化的去製作所需要的呈現的列印頁面,並且想讓某段落分到下一個頁面,也可用pag-break-after:always;強制分頁。

以下簡單的範例展示這些CSS3很棒的功能。

@page {
    margin: 1cm; /*print邊界*/
    size:210mm 148mm; /*列印紙張大小*/
}
.print{
    page-break-after:always; /*print分頁面*/
}
@media print{
    .imgs{
        width: 100px;
    }
}

範例展示:(可按下遊覽器列印來預覽列印頁面結果)

Demo | 下載測試頁面