css - 在浏览器中查看打印 css

Question

我想知道如何检查我的打印 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;
}

Answer 1

Chrome 在DevTools中提供了开箱即用的功能- 请参阅CSS Media Type Emulation。

Answer 2

在 chrome 中执行此操作：

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

可以在这里找到非常详细的步骤。

Answer 3

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

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

安装工具栏后，可以在 CSS -> 按媒体类型显示样式 -> 显示打印样式下找到该选项。