[英]Apply media query style to media print?
我有一个CSS文件,部分包含“普通” css,并且在调整窗口大小时对css进行了一些更改:
@media only screen and (min-width: 400px) and (max-width: 767px) {
/* css */
}
现在,当我打印HTML页面时,它仅使用“普通” css。
但是,在打印页面时,我想使用此媒体查询中的“普通” CSS PLUS部分。
有没有办法做到这一点?
只需在其@media
规则中添加一个逗号,然后print
,如下所示:
@media only screen and (min-width: 400px) and (max-width: 767px), print {
/* css */
}
尝试这个
HTML
<header>
<h1>header</h1>
</header>
<section>
<div class="container clearfix">
<div class="item"> ITEM1 </div>
<div class="item"> ITEM1 </div>
<div class="item"> ITEM1 </div>
<div class="item"> ITEM1 </div>
<div class="item"> ITEM1 </div>
<div class="item"> ITEM1 </div>
<div class="item"> ITEM1 </div>
<div class="item"> ITEM1 </div>
</div>
</section>
<footer>
<h1>footer</h1>
</footer>
// CSS
@media screen and (max-width:420px){
.item{
color:red;
}
}
@media screen and (min-width: 321px) and (max-width:960px){
.item{
color:green;
}
}
@media screen and (min-width: 720px) and (max-width:1024px){
.item{
color:blue;
}
}
@media screen and (min-width:1024px){
.item{
color:orchid;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.