为屏幕和打印媒体设计页面 - 字体大小

我创建了一个显示在屏幕上的报告，它也应该可打印。该应用程序也必须支持IE 6.0。为屏幕和打印媒体设计页面 - 字体大小

我应该使用什么字体大小？我已经阅读过，我应该使用em作为屏幕媒体（网页）和pt打印媒体（我知道em是可扩展的，pt不是...）。

你将如何设计这样一个页面的CSS元素？

例如为打印媒体创建一个单独的css文件，并在那里复制所有的css类并修改字体大小？这么多重复。

没有更好的方法吗？

谢谢

来源

2011-07-12 The Light

你不需要重复那么多。

创建您的Web报表。

然后，在你的样式表的正文中添加的打印样式的引用，像这样

@media print { 
div#content {background:#fff; width:90%; font-family:serif; font-size:12px;} 
div#header, div#insideheader, div#topnav, div#footer, 
div#navcontainer, p.pic img {display:none;} 
div#main {border:none; background:none;} 
a {color:black;} 
}

在上面的例子中，我

设置background-color到white和扩展内容填写大部分页面的width
删除大部分额外的部分，如nav和footer，额外的图片等
更改链接颜色
将字体设置为serif font，易于阅读打印，尺寸为12px，这是非常标准的。

来源

2011-07-12 15:20:17

如果第一个样式表是标记为media all，第二个样式表是媒体打印，则第二个样式表将实际上是扩展名，并且是第一个用于打印介质的第一个样式表。选择屏幕的打印点和ems点。

看看这篇文章，你可能没有想过的其他事情。

http://www.alistapart.com/articles/goingtoprint/

来源

2011-07-12 15:20:45

谢谢，他们有点难以合作;所有元素都从对方的字体大小继承;需要一个适当的设计。我在我的打印样式表中添加了一个背景颜色：红色到div元素，但打印时不显示红色背景，不知道有什么问题。 –

您的浏览器设置可以配置为允许打印或背景图像或颜色，或不允许。 Google会帮助您找到修改您自己的浏览器设置的指示，但不幸的是，您无法控制用户将使用的设置。 –

有关使用ems的帮助，请参阅http://trevordavis.net/blog/the-6-most-important-css-techniques-you-need-to-know的技巧1 –

为屏幕和打印媒体设计页面 - 字体大小

回答

相关问题