css - 从 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 和 出现的地方就成功了。

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

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