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

Question

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

这是桌面上的两列布局。使用CSS媒体查询时，我在视口为800px或更小时将其设置为一列：

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

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

问题是当你去打印时（目前使用Chrome），它决定一张信纸大小的纸张小于800px，所以使用媒体查询样式进行打印。

我们正在使用Bootstrap，它使用这样的媒体查询。一种解决方案是修改CSS，以便添加＆＃39;屏幕＆＃39;改性剂：

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

唉，这是一个巨大的企业项目，有多个团队都有所贡献，所以我们现在真的不会搞乱任何基础CSS（因为这通常会导致其他团队的其他问题的多米诺骨牌效应。 ..）

有没有一种方法可以解决这个问题，就像我们需要打印的这个特定页面一样，单独编写一个单独的打印样式表＆＃34;正如您在屏幕上看到的那样＃34;？

我正在考虑某种方式来告诉浏览器＆＃34;假装纸张比它宽，并在打印时使用桌面布局......＆＃34;

Answer 1

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

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

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