我最近一直在为一个网站设计打印样式表,我意识到我不知道如何有效地调整它。为屏幕布局设置重载循环是一回事:

更改代码 点 重新加载

但当你试图打印时,整个过程会变得更加艰巨:

更改代码 点 重新加载 打印 斜视打印预览图像 在预览中打开PDF以作进一步检查

我是不是错过了一些工具?WebKit的检查器有“假装这是分页媒体”复选框吗?Firebug(战栗)能施展什么魔法吗?


当前回答

在Chrome v41中,它也在那里,但位置略有不同。

其他回答

按照rflnogueira的回答,当前的Chrome设置(40.0.*)将如下所示:

Chrome的UI从v53开始就不一样了。

我不需要经常使用这个功能,但每当我使用这个功能时,我总是要花很长时间才能弄清楚Chrome团队从我上次燃烧周期试图追踪它到哪里去了。

注意这是。菜单在开发工具窗格,而不是…菜单在Chrome浏览器窗格。

现在向下滚动渲染部分。它通常在底层。

有一种简单的方法来调试你的打印样式表,而不需要切换HTML代码中的任何媒体属性(当然,正如指出的那样,它不能解决宽度/页的问题):

使用Firefox + Web开发扩展。 在Web开发人员菜单中,选择CSS /按媒体类型显示CSS /打印 返回Web开发人员菜单,选择选项/持久化功能

现在您正在查看打印的CSS,您可以无限期地重新加载页面。 完成后,取消选中“Persist Features”并重新加载,您将再次获得屏幕CSS。

HTH.

在DreamWeaver中有一个工具栏,可以显示你想要的任何渲染选项: 屏幕,打印,手持媒体,投影屏幕,电视媒体,设计时间样式表等。 这是我特别使用的,因为它:立即显示预览只需按下一个按钮。

在Firefox(87.0)中,“DOM和样式检查器”有一个用于打印媒体模拟的切换按钮。

它的一个缺点是不能清楚地描绘页面边界。