基本語法
// 列印模式設定
@media print {
*****css here*****
}
//列印頁面設定
@page{
****setting here****
}
以畫面上有一個需要被列印的元素classname: PrintUnit以及一個不要被列印但要顯示在瀏覽器中的元素classname: NotPrint為例。
@media print {
// 隱藏不要被列印的元素
.NotPrint {
display:none;
}
// 要被列印的元素
.PrintUnit {
// 元素前要被分頁
page-break-before:always;
// 元素本身不能被分頁
page-break-inside:avoid;
}
}
@page{
size: A4 portrait; //a4尺寸 直式
margin: 1cm; //邊距1公分
orphans:4; //頁面最後一段段落行數,預設值為2
widows:2; //頁面第一段段落行數,預設值為2
}
這篇寫得超清楚
你今天打肉了沒?關於 @media print 的二三事..
寫很多說明 但code是圖片
Print —— 被埋没的Media Type – 腾讯CDC
w3c文件
CSS Paged Media Module