前两天看见一个读者的博文，说到他要实现一个网页打印的功能，因为要控制网页打印的样式，因此通过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实际可以取三个值：

1. screen 表示当前针对的是屏幕
2. print 表示当前样式针对的是打印机
3. speech 表示当前样式针对的是屏幕阅读

因此，如果要对页面在打印机下的效果进行特别样式，我们只需要调整对应的部分在media print下的样式就好了，比如在打印时隐藏部分内容：

@media print {
  #doc_menu {
    display: none;
  }
}

通过这种方式，我们就可以为同一个页面的打印和展示提供不通的样式，而样式调试，可以通过打印预览进行预览查看。