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

【问题标题】：responsive layout into account when printing from Chrome从 Chrome 打印时考虑到响应式布局
【发布时间】：2017-03-17 23:18:01
【问题描述】：

我用 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

显然，一个页面是相当宽的，所以它应该更多地被认为是一个中等屏幕而不是一个小屏幕。但是，在打印时，我看到的布局与小屏幕上的布局相同。

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，我知道，但我只想使用我的响应式网格。查看我的附加编辑
Materializecss 似乎使用“移动优先”的方法。因此，默认样式（没有媒体查询）用于小屏幕，媒体查询用于中大屏幕。这就是为什么当您打印页面时，使用的样式是小屏幕的样式。