媒體查詢中的打印
阿新 • • 發佈：2017-06-08
瀏覽器 渲染 href 重置 設計 ntb js實現 支持 不同
項目中要實現打印特定的文章，所以要隱藏一些元素，當時是用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>
[email protected] print{}就可以指定打印出來的樣式。
另外，因為是css3的內容，因此IE9+才支持。
媒體查詢中的打印