请参阅浏览器中的打印 css [重复]

Posted 2023-03-06

【中文标题】请参阅浏览器中的打印 css [重复]

【英文标题】：See print css in the browser [duplicate]

【发布时间】：2013-04-12 21:04:18

【问题描述】：

我想知道如何检查我的打印 css，就像我用普通 css 检查我的元素并且我到处寻找插件和类似的东西时一样

就像您在 chrome 中预览打印但您可以检查元素时一样

@media print 
   pcolor:red;
   ..... my css

.sharebar 
    position: absolute;
    right: 0;
    top: 0;
    z-index: 195;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;

【问题讨论】：

当另一个“dupe”仅面向 chrome 时，这怎么可能是重复的，这是一个问题，而不是浏览器特定的问题

更进一步，我使用的关键字搜索永远不会选择其他问题，但是这个问题出现了。如果它不可搜索，则不应将其标记为重复。隐藏在默默无闻的地下室中的黑暗时代的一些答案不应算作“重复答案”

【参考方案1】：

如果您使用的是 Firefox，则可以使用 Web 开发人员工具栏（以及许多其他好东西！）

http://chrispederick.com/work/web-developer/

安装工具栏后，可以在 CSS -> Display Styles By Media Type -> Display Print Styles 下找到该选项。

【讨论】：

它不工作。我做了你提到的最后一步。谢谢

【参考方案2】：

Chrome 在DevTools 中具有开箱即用的此功能 - 请参阅CSS Media Type Emulation。

【讨论】：

您无法在打印预览屏幕中检查元素...

自发布此答案以来，Chrome 可能已经发生了变化，但我没有看到任何可以让您预览打印媒体类型的内容。我看到的只是与移动设备相关的设置。

@Knyri 是的，自从这个答案以来，Chrome 似乎发生了很大变化。为所有版本的 Chrome 提供解决方案的更好答案是 ***.com/questions/9540990/…

【参考方案3】：

在 chrome 中执行此操作：

打开开发者工具 单击“自定义和控制 DevTools”汉堡菜单按钮。 选择更多工具 > 渲染设置。 选中“渲染”选项卡上的“模拟 CSS 媒体”复选框并选择“打印”媒体类型。

非常详细的步骤可以找到here。