项目中要实现打印特定的文章，所以要隐藏一些元素，当时是用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- 600px)"> --> <style type="text/css"> @media print{ .no-print{ display: none; } } @media screen and (min- 900px) (max- 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+才支持。