从Chrome打印时考虑到响应性布局

Question

我做了一个很好的材料化布局。现在，当我尝试从Chrome打印它时，布局与移动设备上的布局是一样的。

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

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

谢谢！

编辑：

更准确地说，我的布局使用了物质化网格。所以，我有些东西看起来像：

<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) { ... }

所以很明显，它们只适用于屏幕设备，而不适用于打印设备。我不知道他们为什么要加这个。消除物化(.min)中所有的.min(.css)都起了作用。

请注意，我必须添加它以传递第一个响应断点。

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

Answer 2

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

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