媒体查询中的打印

Posted 2020-09-22 Jo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了媒体查询中的打印相关的知识，希望对你有一定的参考价值。

项目中要实现打印特定的文章，所以要隐藏一些元素，当时是用js实现的隐藏，忘记了css3就有这么个媒体查询。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/small.css" media="screen and (min-width: 600px)"> -->
    <style type="text/css">
        @media print{
            .no-print{
                display: none;
            }
        }

        @media screen and (min-width: 900px) (max-width: 1800px){
            body{
                background-color: #ccc;
            }
        }
    </style>
</head>
<body>
    <div id="d">
        <h1 class="no-print">打印标题</h1>
        <p class="content">
            使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
        </p>
    </div>

    <script type="text/javascript">
        var d = document.getElementById(‘d‘);

        d.onclick = function(){
            window.print();
        }
    </script>
</body>
</html>

只需要指定@media print{}就可以指定打印出来的样式。

另外，因为是css3的内容，因此IE9+才支持。

以上是关于媒体查询中的打印的主要内容，如果未能解决你的问题，请参考以下文章

javascript 命令无法使用媒体查询打印

媒体查询_网页打印样式