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

更改代码 点 重新加载

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

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

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


当前回答

我假设您希望在不使用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/

其他回答

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

2019 -更新说明

打开Chrome检查器 从Mac =>选项+命令+ i 从Windows => F12 点击小3点,自定义和控制devTools 选择更多工具 选择呈现 滚动到底部以模拟CSS媒体 从向下箭头选择打印

我假设您希望在不使用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/

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

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

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