2

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

这是桌面上的两列布局。使用 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（因为这通常会导致其他团队的其他问题产生多米诺骨牌效应......）

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

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

4

1 回答 1

1

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

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

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

于 2017-06-16T19:52:20.863 回答