在浏览器中查看打印 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16105147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
See print css in the browser
提问by Simon Dragsb?k
I wanted find out how i could inspect my print css just like when i inspect my elements with the normal css and i looked all over for plugins and such stuff
我想知道如何检查我的打印 css，就像我用普通的 css 检查我的元素一样，我到处寻找插件和类似的东西
Like when you preview a print in chrome but where your able to inspect the elements
就像您在 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;
}
回答by andyb
Chrome has this functionality out of the box in the DevTools- see CSS Media Type Emulation.
Chrome 在DevTools中具有此功能，请参阅CSS Media Type Emulation。
回答by Mike
Do this in chrome:
在 chrome 中执行此操作：
- Open the Developer Tools
- Click the "Customize and control DevTools" hamburger menu button.
- Choose More tools > Rendering settings.
- Check the "Emulate CSS Media" checkbox at the Rendering tab and select the Print media type.
- 打开开发者工具
- 单击“自定义和控制 DevTools”汉堡菜单按钮。
- 选择更多工具 > 渲染设置。
- 选中渲染选项卡上的“模拟 CSS 媒体”复选框，然后选择打印媒体类型。
Very detailed steps can be found here.
可以在此处找到非常详细的步骤。
回答by sevenseacat
If you're using Firefox, you can use the Web Developer Toolbar for this (and many other good things!)
如果您使用 Firefox，您可以使用 Web Developer Toolbar（以及许多其他好东西！）
http://chrispederick.com/work/web-developer/
http://chrispederick.com/work/web-developer/
After installing the toolbar, the option can be found under CSS -> Display Styles By Media Type -> Display Print Styles.
安装工具栏后，可以在 CSS -> Display Styles By Media Type -> Display Print Styles 下找到该选项。
