html - 我如何在 css 中设置打印 html 页面的样式

Question

我编写此代码是为了使用 80mm 纸在纸质副本中打印 html 页面，但此代码无法正常工作，我需要一些帮助来更正它

@media print {
    div.invoice{
       background: #FFFFFF;
       width:40%;
       margin-left:30%;
       margin-top: 0px
       }
       div.invoice div{
          background: #FFFFFF;
          color: black;
          margin-left: 1%;
       }
       div.invoice h2{
            font-size: 14px;
       }
       div.invoice h3{
            font-size: 13px;
       }
       div.invoice h4{
            font-size: 12px;
       }
       div.invoice div h2, div.invoice div h3, div.invoice div h4{
       color: black;
       line-height:0.8em;
       margin-top:1px;
       -webkit-margin-before: 0.8em;
       -webkit-margin-after: 0.8em;
          }
      h1, h2, h3, h4{
          -webkit-margin-before: 0.4em;
          -webkit-margin-after: 0.4em;
          }
   }

Answer 1

请按照以下步骤操作:

第 1 步:将 media="print" 添加到您的样式表链接或示例中:

<link rel="stylesheet" href="stylesheet.css" type="text/css" media="print" >

第 2 步:然后执行以下媒体查询。

@media print 
{
 body { margin: 0; background-image: none; font-size: 12pt; }
}