☰

如何使用屏幕样式表打印？

tag-icon • tag-icon browser printing
如何使用屏幕样式表打印？

我使用的许多网站的印刷媒体样式表都很糟糕，但它们的屏幕样式表却相当好。

有什么方法可以告诉我的浏览器忽略打印样式表而只使用屏幕样式表打印？

当我想向客户展示两者之间的区别时，我也想这样做。

答案1

我发现，使用 Chrome 开发者工具（Ctrl++ ）是唯一有效的方法。ShiftI

  1. 搜索media="screen"该属性的所有实例并删除。
  2. 然后搜索media="print"并删除整个链接。
  3. 然后尝试打印。

这通常会给我具有屏幕样式的页面。

如果您真的只想禁用打印样式，您可以安装 Web Developer 扩展（我认为有一个适用于 Firefox 和 Chrome 的版本）。它有一个禁用打印样式的按钮。但是，它不会将“屏幕”样式扩展到打印，因此大多数时候它都无法按您希望的方式工作。

答案2

我找到了一个简单的方法在铬合金。

  • 打开开发者工具
  • 垂直省略菜单（⋮）
  • 显示控制台抽屉 ( Esc)
  • 垂直省略菜单（⋮）
  • 渲染
  • 模拟 CSS 媒体类型：屏幕。

现在尝试打印。它将选择屏幕 CSS 而不是打印 CSS。

答案3

有一种新方法可以在开发者工具中直接选择媒体模拟，请参阅https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

答案4

  1. 做任何事情詹姆斯说;)

    您可以打开 Chrome 开发者工具设置（右下角）检查输出，并在“覆盖”中选择“模拟 CSS 媒体打印”视图。通过切换此选项，您可以比较打印和屏幕视图。玩得开心！

  2. 安装此插件： https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

现在背景图像和颜色也被打印了。

错误：不适用于 CSS 精灵。

编辑：我认为 Chrome 已在 2014 年改变了打印视图，因此您不再需要使用链接的插件。

相关内容