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

【问题标题】：Dealing with responsive media queries when printing打印时处理响应式媒体查询
【发布时间】：2017-11-19 16:20:40
【问题描述】：

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

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

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

问题在于，当您打印此文件时（目前使用 Chrome），它会确定一张 letter 大小的纸小于 800 像素，因此使用媒体查询样式进行打印。

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

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

唉，这是一个由多个团队共同参与的大型企业项目，所以我们现在真的不想弄乱任何基础 CSS（因为这通常会导致其他问题对其他团队产生多米诺骨牌效应...... )

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

这将起作用，但属于我所做的“缺少编写单独的打印样式表”的评论。这绝对是一个选项，但将是最多的工作，并要求我们保持一个额外的 CSS 文件与其余的 CSS 布局同步。
我认为从长远来看它仍然是更好的解决方案。为了更直接，您可以随时将这些样式写入 style 标记并将媒体属性添加到其中：<style media="print">Stles here</style>
哦，当然。只是它是一个复杂的页面，已经包含了数百行 CSS，我们必须将它们移到这个辅助文件中，然后在将来重新设计一个页面时，打印版本也必须更新。这也许是我们所能做的。但尽量避免该解决方案将带来的技术债务。