爲屏幕和打印媒體設計頁面 - 字體大小

我創建了一個顯示在屏幕上的報告，它也應該可打印。該應用程序也必須支持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 –

爲屏幕和打印媒體設計頁面 - 字體大小

回答

相關問題