css - 在响应式站点上，打印时应用哪个断点？

Question

我有一个响应式站点，我正在尝试在其中实现打印媒体查询。

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

当我调整浏览器大小时，Devtools 预览会发生变化，所以我不能确定在实际打印预览模式中使用了哪个断点。

1. 问题是，打印时，浏览器使用什么宽度来生成快照？
2. 这个宽度在所有浏览器中是否一致？
3. 如果没有固定的宽度，我该怎么做？

Answer 1

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

我最近处理一些打印样式表的收获是：

• 如果您想在打印中应用样式，并且它位于断点媒体查询中，也将其放在您的打印媒体查询中。
• 始终检查打印预览，并检查多个浏览器。

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