在响应站点​​上，打印时将应用哪个断点？

Question

我有一个响应网站，我试图在其中实施印刷媒体查询。

当我使用Chrome Devtools (Rendering tab > Emulate CSS media > Print)进行预览时，它看起来与该断点处的实际网站非常相似，但是应用了打印CSS。但是，在打印预览（CTRL + P）上，完全不同。

随着我调整浏览器大小，Devtools预览会发生变化，因此我无法确定在实际的打印预览模式下使用哪个断点。

1. 问题是，在打印时，浏览器用来生成快照的宽度是多少？
2. 此宽度在所有浏览器中是否一致？
3. 如果没有固定的宽度，我该如何处理？

Answer 1

不同的浏览器在打印样式时对断点的解释不同。我刚刚在Firefox和Chrome中以1000像素宽打开了此页面，在打印时，Firefox保留了左侧的侧边栏，而Chrome删除了它。而且，您已经注意到，不能保证打印仿真看起来像打印预览。通常，我发现使仿真看起来正确比使实际打印看起来正确更容易。

最近我从事一些印刷样式表的收获是：

• 如果您希望将样式应用于印刷形式，并且该样式位于断点媒体查询中，请将其放在印刷媒体查询中。
• 始终检查打印预览，并在多个浏览器上进行检查。

在将断点样式添加到打印查询中之后，可能仍然需要修复样式，但这是向前迈出的一大步。