將媒體查詢樣式應用於媒體打印？

Question

我有部分「正常」的CSS一個CSS文件以及正在調整那些對CSS做了一些改變窗口：

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

/* css */ 

} 

現在，當我打印我的HTML頁面，它只是使用了「正常「css。

但是，當打印頁面時，我想使用「普通」CSS加上此媒體查詢中的部分。

有沒有辦法做到這一點？

Answer 1

只是一個逗號，後跟print添加到您的@media規則像這樣：

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

/* css */ 

} 

Answer 2

試試這個

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