我有部分“正常”的CSS一个CSS文件以及正在调整那些对CSS做了一些改变窗口:将媒体查询样式应用于媒体打印?
@media only screen and (min-width: 400px) and (max-width: 767px) {
/* css */
}
现在,当我打印我的HTML页面,它只是使用了“正常“css。
但是,当打印页面时,我想使用“普通”CSS加上此媒体查询中的部分。
有没有办法做到这一点?
我有部分“正常”的CSS一个CSS文件以及正在调整那些对CSS做了一些改变窗口:将媒体查询样式应用于媒体打印?
@media only screen and (min-width: 400px) and (max-width: 767px) {
/* css */
}
现在,当我打印我的HTML页面,它只是使用了“正常“css。
但是,当打印页面时,我想使用“普通”CSS加上此媒体查询中的部分。
有没有办法做到这一点?
只是一个逗号,后跟print
添加到您的@media
规则像这样:
@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;
}
}
在CSS中包含标签 –
使用'添加媒体= “打印” @media print' – Morpheus
你的意思是我必须写'@media屏幕,print'呢? – 2339870