首页 > 代码库 > 媒体查询中的打印

媒体查询中的打印

2024-10-03 02:56:01   216人阅读

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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+才支持。

媒体查询中的打印


联系
我们