将媒体查询样式应用于媒体打印?

时间:2014-05-20 07:21:49

标签: html css printing media-queries

我有一个CSS文档,部分是“正常”的css,并且在调整窗口大小时对css进行了一些更改:

@media only screen and (min-width: 400px) and (max-width: 767px) {

/* css */

}

现在,当我打印HTML页面时,它只使用“普通”css。

但是,在打印页面时,我想使用“普通”CSS PLUS来自此媒体查询的部分。

有办法做到这一点吗?

2 个答案:

答案 0 :(得分:2)

只需在您的print规则中添加逗号后跟@media即可:

@media only screen and (min-width: 400px) and (max-width: 767px), print {

/* css */

}

答案 1 :(得分:-1)

试试这个

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;
   }
}

DEMO