请参见在浏览器中打印css

请参见在浏览器中打印css,css,Css,我想知道如何检查我的打印css,就像我用普通css检查我的元素一样,我到处寻找插件之类的东西 比如当你在chrome上预览一张照片,但是你可以检查其中的元素 @media print { p{color:red;} ..... my css } .sharebar { position: absolute; right: 0; top: 0; z-index: 195; font-size: 12px; font-family: 'Op

我想知道如何检查我的打印css,就像我用普通css检查我的元素一样,我到处寻找插件之类的东西

比如当你在chrome上预览一张照片,但是你可以检查其中的元素

@media print {
   p{color: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;
}


如果您使用的是Firefox,那么您可以使用WebDeveloper工具栏来实现这一点(以及其他许多好东西!)


安装工具栏后,可在CSS->Display Styles By Media Type->Display Print Styles(按媒体类型显示样式)->显示打印样式下找到该选项。

Chrome在中提供了此功能-请参阅。

在Chrome中执行此操作:

  • 打开开发人员工具
  • 单击“自定义和控制DevTools”汉堡菜单按钮
  • 选择更多工具>渲染设置
  • 选中“渲染”选项卡上的“模拟CSS介质”复选框,然后选择打印介质类型

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

    您无法检查printpreview屏幕中的元素…可能自发布此答案后Chrome已更改,但我在其中没有看到任何让您预览打印媒体类型的内容。我所看到的都是与移动设备相关的设置。@Knyri是的,从这个答案开始,Chrome似乎改变了很多。对所有版本的Chrome都有解决方案的一个更好的答案是它不起作用。我做了你提到的最后几步。ThanksHow当另一个“dupe”仅面向chrome时,这是否是一个重复的问题这是一个问题而不是特定于浏览器的问题更进一步,我使用的关键字搜索永远不会找到其他问题,但这个问题出现了。如果无法搜索,则不应将其标记为重复。一些来自黑暗时代的答案埋在晦涩的地窖里,不应被视为“重复答案”