我应该在打印 css 中保留#wrapper{ width:100%} 吗？答案

【问题标题】：Should i keep #wrapper{ width:100%} in print css?我应该在打印 css 中保留#wrapper{ width:100%} 吗？
【发布时间】：2011-02-17 02:02:01
【问题描述】：

我应该在打印 css 中保留 #wrapper{ width:100%} 吗？因为在屏幕上我的设计是固定宽度设计960 px。但是世界上有很多纸张类型和尺寸，任何人都可以在任何尺寸的纸上打印，无论大小。

因此，如果在打印 css 中我没有指定相对宽度，那么我认为如果用户将打印的纸张尺寸可以小于或大于我的网站 #wrapper 宽度（@987654324 @)。那么它可能会产生问题。

打印机在打印时也会留一些边距。

那么在打印 css 中应该保持所有内容都是相对大小吗？

更新：

我还应该在 print css 中将 float left 或 right 更改为 float:none 吗？

【问题讨论】：

【解决方案1】：

是的，你应该这样做。如果你坚持一个确定的像素大小，你甚至可能会遇到这样一种情况，即不同的访问者可能会因为他们的打印机 DPI 和/或浏览器而看到不同数量的页面被截断。您可能还需要考虑将字体大小也调整为相对大小（使用 em 或 %）。

请注意：当您切换到相对宽度时，请确保您的所有元素都正确流动，否则您的内容的其他部分可能会被截断或推到奇怪的地方。

【讨论】：

【解决方案2】：

浏览器倾向于在发送到打印机之前将像素转换为类似的大小，因此它看起来与您在屏幕上看到的相似。它不会将像素大小发送到打印机。

【讨论】：

它看起来与屏幕上的内容相似。如果您想对打印布局进行特定的设计考虑，则需要这样做，最好的方法是完全不使用宽度，只需使用width:auto;。这样，内容决定了它在纸上的布局方式。当然，这取决于您希望打印输出的布局如何。您应该考虑到通常不显示背景图像/颜色。这是浏览器中的用户设置。
另请参阅w3.org/TR/CSS2/page.html，了解专门适用于分页媒体（如纸张）的 css 定义。这在 Internet Explorer 和 Opera 中效果很好，但在 Firefox 中效果不佳。我的经验是，在打印网页方面，IE7+非常好。