响应式网站设计（7）-打印样式

以你之姓@ 2021-09-16 04:32 368阅读 0赞

## 打印样式 ##

打印样式，顾名思义是网页打印专用的样式。对应需要打印的网页，可以专门添加打印样式。打印样式的主要作用的是去除背景颜色，去除阴影，换行处理等等。具体代码如下：

@charset "utf-8";
    /* ==============
        打印样式
       ==============
    */
    
    @media print {
        *,
        *:before,
        *:after {
            background: transparent !important;
            text-shadow: none !important;
            box-shadow: none !important;
            color: #000 !important;
        }
    
        a,
        a:visited {
            text-decoration: underline;
        }
    
        a[href]:after {
            content: "('attr(href)')";
        }
    
        abbr[title]:after {
            content: "('attr(title)')";
        }
    
        /**
        使用#和JavaScript的超链接不打印href
         */
        a[href^='#']:after,
        a[href^='javascipt:']:after {
            content: "";
        }
    
        pre,
        blockquote {
            border: 1px solid #999;
            /*欧朋浏览器才起作用，避免在元素内部插入分页符*/
            page-break-inside: avoid;
        }
    
        thead {
            display: table-header-group;
        }
    
        tr,
        img {
            page-break-inside: avoid;
        }
    
        img {
            max-width: 100% !important;
        }
    
        p,
        h2,
        h3 {
            /*在页面底部保留最少行数*/
            orphans: 3;
            /*在元素内部发生分页时，必须在顶部不留的最小行数*/
            widows: 3;
        }
    
        h2,
        h3 {
            /*避免在元素后面插入分页符*/
            page-break-after: avoid;
        }
    }

打印方法：在所在的网页，Ctrl + P即可。

![70][]

[70]: /images/20210802/6905d3d4f6674184992d4cc3e9622ff4.png