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

版权声明： https://blog.csdn.net/qq_41115965/article/details/81974077

打印样式

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

@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即可。