从 Chrome 打印时考虑响应式布局

Question

我用 MaterializeCSS 制作了一个很好的响应式布局。现在，当我尝试从 Chrome 打印它时，布局与移动设备上的布局相同。

这意味着布局看起来很糟糕，因为我的页面（A4）是 21 厘米宽，而它的宽度大约是 6 厘米（对于手机）。

我没有找到关于这个问题的太多信息。有没有办法告诉 Chrome 我的页面宽度为 1200 像素，以便 css 选择器认为媒体很大？

谢谢！

---

编辑：

更准确地说，我的布局使用了materializecss网格。所以，我的物品看起来像：

<div class="row">
<div class="col s12 m6">Item 1</div>
<div class="col s12 m6">Item 2</div>
</div>

在中型和更大屏幕上这应该看起来像这样

Item1  |  Item 2

在小屏幕上就像这样

Item1
Item2

显然，页面相当宽，因此更应该将其视为中屏幕而不是小屏幕。但是，在打印时，我看到的布局仍然与小屏幕上相同。

Answer 1

好的，我发现问题所在了。

MaterializeCSS 断点如下所示：

@media only screen and (max-width: 992px) { ... }

很明显它们只适用于屏幕设备，而不适用于打印设备。我想知道他们为什么选择添加这个。删除 Materialize(.min).css 中所有出现的

only screen and

就可以了。

请注意，我必须添加它才能通过第一个响应断点

@page {
 /*size: 29.7cm 42cm; -> that would be a regular A4 page */
 size: 35cm 49.5cm;
}

Answer 2

您可以使用“打印媒体查询”设置打印样式：

@media print { 
    /* your style goes here */
}

Answer 3

我知道这是一个老问题，但我今天必须处理这个问题，并找到了一种让它发挥作用的方法，并认为我会传递它。我有几个这样的元素：

<div class="col m3 s12">...</div>

我希望它使用 m3 打印 4 列，但它只能打印单列，即 m12。我创建了一个新的 css 定义，将宽度设置为 25% 并且仅用于打印：

@media print {
  .print3 { width: 25% !important; }
}

然后将其添加到每个元素，如下所示：

<div class="col m3 s12 print3">...</div>

现在它在浏览器中具有应有的响应能力，并且会像我想要的那样打印 4 列。当然，如果您想使用其他列大小，只需输入适当的宽度百分比即可。例如，.print6 将是 50%，.print4 将是 33.3333333%，而 .print8 将是 66.6666667%，等等。希望有一天这可以帮助某人帮助我偿还我在这里得到的所有帮助。