前两天看见一个读者的博文,说到他要实现一个网页打印的功能,因为要控制网页打印的样式,因此通过reload来刷新一个临时页面,再打印这个页面,实现打印和展示页面不同样式的功能。想起来原来公司的前端也有这个问题,所以这里讲讲这个事情。
我们都知道css里面的media可以用来控制不同显示大小下的不同样式,例如:
@media only screen and (min-width: 1024px) {
:deep(pre[class*="language-"]) {
width: 900px;
}
table.arguments {
width: 900px;
}
}
@media only screen and (min-width: 1280px) {
:deep(pre[class*="language-"]) {
width: 900px;
}
table.arguments {
width: 900px;
}
}
@media only screen and (min-width: 1600px) {
:deep(pre[class*="language-"]) {
width: 1200px;
}
table.arguments {
width: 1200px;
}
}
但是这其实不是media的全部,如果留意上面的写法,可以发现里面有media only screen的字样,这是什么意思呢,就是说这段css只适用于在屏幕上展示的时候。
按这篇文章的说法,media实际可以取三个值:
- screen 表示当前针对的是屏幕
- print 表示当前样式针对的是打印机
- speech 表示当前样式针对的是屏幕阅读
因此,如果要对页面在打印机下的效果进行特别样式,我们只需要调整对应的部分在media print下的样式就好了,比如在打印时隐藏部分内容:
@media print {
#doc_menu {
display: none;
}
}
通过这种方式,我们就可以为同一个页面的打印和展示提供不通的样式,而样式调试,可以通过打印预览进行预览查看。