从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

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

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

Answer 2

好的，我发现了什么问题。

MaterialiseCSS断点如下所示：

@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;
}