css - 打印时处理响应式媒体查询

Question

问题:https://output.jsbin.com/donapohuci

这是桌面上的两列布局。使用 CSS 媒体查询，当视口(viewport)为 800 像素或更小时，我将其设置为一列:

div {
  float: left; 
  width: 50%;
}

@media (max-width:800px) {
  div {
    width: 100%
  }
}

问题是，当您打印此文件时(目前使用 Chrome)，它会判断信纸大小的纸张小于 800 像素，因此使用媒体查询样式进行打印。

我们正在使用 Bootstrap，它使用这样的媒体查询。一种解决方案是修改 CSS，使其添加“屏幕”修饰符:

 @media screen and (max-width:800px)

唉，这是一个巨大的企业元素，有多个团队都在做出贡献，所以我们真的不想在这个时候弄乱任何基础 CSS(因为这通常会导致其他团队出现其他问题的多米诺骨牌效应...... )

有没有办法解决这个问题，即只为这个我们需要打印“如您在屏幕上看到的”的特定页面编写单独的打印样式表？

我正在考虑以某种方式告诉浏览器“假装纸张比实际更宽，并在打印时使用桌面布局...”

Answer 1

我要解决这个问题的方法是在常规 CSS 的链接中添加媒体 screen 属性，这样它就不适用于打印，并创建一个单独的自定义打印样式表，之后调用，再次使用 print 媒体属性:

<link href="print.css" rel="stylesheet" media="print">

默认的 Bootstrap 可能包含打印文件，但这应该很容易删除，如果不可能，最终样式表仍会覆盖这些样式。