项目中要实现打印特定的文章，所以要隐藏一些元素，当时是用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+才支持。
时间： 2024-10-22 03:08:38