调试打印样式表的建议?

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

更改代码点重新加载

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

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

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

调试时使用media="screen"在浏览器中显示打印样式表。打印预览视图使用与普通浏览模式相同的渲染引擎，因此您可以使用它获得准确的结果。

2010-03-16 07:44:35

我假设您希望在不使用HTML转PDF方法的情况下尽可能多地控制打印窗口……使用@media屏幕调试- @media打印最终的css

使用@media查询中的英寸和分，现代浏览器可以让您快速了解打印时将要发生的事情。

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with pt and in units, and using the @media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to @media, you've got all the code you need for a linked CSS file using media = "print" attribute - just copy/paste the @media screen rules to the referenced file.

祝你好运。网络不是为印刷而生的。创建一个交付所有内容的解决方案，样式与浏览器中看到的样式相等，有时是不可能的。例如，一个以1280 x 1024观众为主的流畅布局并不总是容易转化为漂亮整洁的8.5 x 11激光打印。

purusal的W3C参考:http://www.w3.org/TR/css3-mediaqueries/

2011-02-23 05:04:15

如果你有一个打印函数，将页面的内容重写到一个新的窗口，并引用打印样式表，你会更好地了解它在纸上的样子，你也可以用firebug之类的工具来调试它。

这里有一个如何用JavaScript / jquery实现的例子

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

2011-02-28 11:32:13

我使用宏来发送重复的按键和鼠标点击。在Windows下，AutoHotKey是一个很棒的软件，在OS X下，你可以读到Automator，这是OsX的替代AHK。

在Windows下(在OS X下用Cmd替换Ctrl)“Ctrl-s /切换到Fx窗口，无论它在窗口打开的列表/ Ctrl-r”绑定到1个未使用的键避免无趣任务的挫折，最终将拯救我的手臂从RSI:)

2011-02-28 19:30:39

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

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

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

HTH.

2011-02-28 20:46:43

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

2011-03-01 16:41:32

在Chrome的检查器中有一个选项。

打开DevTools检查器(mac: Cmd + Shift + C, windows: Ctrl + Shift + C) 单击位于DevTools面板左上角的Toggle设备模式图标。(windows: Ctrl+Shift+M, mac: Cmd+Shift+M)。单击浏览器视口右上角的More overrides图标，打开devtools抽屉。然后，在“模拟”抽屉中选择“媒体”，并选中“CSS媒体”复选框。

这应该能奏效。

更新:DevTools的菜单已经改变。现在可以通过单击右上角的“三点”菜单找到>更多工具>渲染设置>模拟媒体>打印。

来源:谷歌DevTools page*

2013-01-18 13:55:39

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

2015-02-12 17:05:32

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

2015-03-20 21:07:34

Chrome 48可以在渲染选项卡中调试打印样式。

点击检查器和渲染设置的菜单图标右上角。

编辑对于Chrome 58，位置已更改为Web检查>菜单>更多工具>渲染

2016-02-03 17:04:54