css @media print控制打印样式

昵称老重复

已于 2022-06-06 15:46:48 修改

阅读量1.7w

点赞数 4

分类专栏： css 文章标签： css 前端 html

于 2022-06-06 15:46:23 首次发布

本文链接：https://blog.csdn.net/qq_25286361/article/details/125145443

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS进行打印机样式的修改，包括设置页面边距、分页行为以及针对首页面的特殊样式。@page伪类如:left、:right和:first用于定制不同页面样式，page-break-before属性控制元素前的分页。同时，博客还探讨了如何在打印样式中保持颜色准确性，并隐藏特定元素以优化打印效果。

摘要由CSDN通过智能技术生成

print

用于打印机样式修改

伪类修改样式

:left、:right、:first。

:left 和 :right

通过 :left 和 :right 设置左右页面不同样式，并不代表用户代理会将页面双面打印

/* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 */
@page :left {
    margin-left: 2.5cm;
    margin-right: 2.7cm;
}

@page :right {
    margin-left: 2.7cm;
    margin-right: 2.5cm;
}

:first

用于匹配到文档的第一页

/* 首页上页边距设置为 10cm */
@page :first {
    margin-top: 10cm; 
}

分页

page-break-before

page-break-before用于设置元素前面的分页行为

div {
   page-break-before: avoid;
}

完整样式

@media print {
    
    @page {
      /* 纵向打印 */
      // size: portrait;

      /* 横向打印 */
      size: landscape;

      /* 去掉页眉页脚*/
      margin-top: 0;
      margin-bottom: 0;
    }
    /* 告诉浏览器在渲染它时不要对框进行颜色或样式调整 */
    * {
      -webkit-print-color-adjust: exact !important;
      -moz-print-color-adjust: exact !important;
      -ms-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /*打印不显示打印按钮*/
    .print-button-container {
      display: none !important;
    }
    
    /* 伪类 :first 用于匹配到文档的第一页, 首页上页边距设置为 10cm */
    @page :first {
      margin-top: 10cm; 
    }
    
    /* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 */
    /**/
    @page :left {
      margin-left: 2.5cm;
      margin-right: 2.7cm;
    }
    @page :right {
      margin-left: 2.7cm;
      margin-right: 2.5cm;
    }
    
    
    
  }