码迷,mamicode.com
首页 > Web开发 > 详细

媒体查询_网页打印样式

时间:2017-09-04 16:55:22      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:tle   使用   媒体查询   round   ==   none   imp   需要   play   

需求:

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

那,如何满足需求?

  设置一个打印媒体查询

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

/**
 */
@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;
    }
}

 

  

 

  

媒体查询_网页打印样式

标签:tle   使用   媒体查询   round   ==   none   imp   需要   play   

原文地址:http://www.cnblogs.com/2bjiujiu/p/7474326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!