2017年10月17日 星期二

[ CSS ] CSS3 print 列印

media 是指定 CSS 套用裝置
預設(不指定時)是螢幕
例如
<link rel="stylesheet" type"text/css" href="print.css" media="print">
這代表這一份 CSS 只有在列印時才會生效
你也可這麼寫
<style type="text/css">
@media print {
.....
.....
.....
}

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

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

HTML
<div class="print">
    要印的內容
</div>