本文详细介绍了如何使用 CSS 的 media=print 属性来优化网页打印效果，包括设置打印专用字体大小、调整元素显示状态及解决背景色打印问题。通过具体实例展示了如何让网页在打印时呈现不同布局。
1.<style media="print">、<link media="print">的用法合理应用，media="print"是不被网页所显示的，只能在打印的效果上存在，可以设置出打印效果和在网页上所显示的不一样。
2.例：设置打印出来的字体和网页是不同的
或者 <style media="print">body{font-size:12px;}</style>
3.实例：
<html>
<head>
<style> .none { display:none;} </style>
<style media="print">.none { display:block;}</style>
</head>
<body>
<h1>media="print" 实例</h1>
<p style="background-color:red">在网页里面是可以看见我的</p>
<p class="none" media="print" >在网页里看不见我，打印出来你就可以看见我啦！ ^_^ （ 此页面会通过 media="print" 样式表进行格式化。 ）</p>
</body>
</html>
4.打印不出背景色
要在Chrome中启用背景打印：
body {
-webkit-print-color-adjust: exact;
}
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
