媒体查询_网页打印样式

Posted 2020-10-05 北门吹雪

需求：

　　客户想要打印网页内容，而打印的数据都是黑白现实的的，不需要其他颜色，需要给客户设置打印样式

那，如何满足需求？

　　设置一个打印媒体查询

/* 打印样式
   ========================================================================== */

/**
 */
@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !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^=‘javascript:‘]: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 {
        /*当标题和文字不分离，3行文字以上带走标题进入下一页*/
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-inside: avoid;
    }
}