[分享]css3打印预览样式

CSS3的出现极大地丰富了网页设计的可操作性，其中也为打印方面的界面设计提供了更多的样式效果。在开发中需要对打印预览样式进行调整，以避免打印出来的网页出现不必要的空白，或者出现内容被割裂等情况。这时候...

CSS3的出现极大地丰富了网页设计的可操作性，其中也为打印方面的界面设计提供了更多的样式效果。在开发中需要对打印预览样式进行调整，以避免打印出来的网页出现不必要的空白，或者出现内容被割裂等情况。这时候我们就可以使用CSS3来设置打印预览样式。

要设置打印预览样式的基础是一个叫做‘媒体查询’（Media queries）的特性。在CSS3中，可以通过媒体查询来判断使用环境是否是打印机，进而给其应用不同的样式来优化打印显示效果。

为了使打印出来的页面排版更加稳定，优美。常用的CSS3属性有：

@media print {
	body { width: 100%; }
	#container { width: 850px; margin: 0 auto; }
	#header, #footer { display: none; }
	#content { margin-top: 10px; }
} 

目前最常用的是‘@media print’，它是一种CSS媒体查询语法的提供方。针对这种环境下样式的设置及优化，可以节省打印机纸张，提高工作效率。

总之，在打印机条件下，网页格式的可预览性，比如保证打印最小缩放，避免内容裁剪，固定打印区域等等，是非常重要的技巧。而CSS3的打印预览样式正提供这种操作的便捷性及个性化定制的效果体验。