做项目，有些网页需要打印，很多时候，是导出WORD或EXCEL再打印。
现在需要页面直接打印，方便没有安装OFFICE的用户。
需求：页面在浏览器中浏览是一种样式，要打印这个页面，是另一种样式。
解决方法：用link标签中的media属性解决此问题。
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
当浏览器访问的时候，只会引用渲染screen.css中的样式，呈现效果是screen.css中的样子；
当打印的时候，呈现的则是print.css中的内容。
media属性有以下这些：
| 值 | 描述 |
|---|---|
| screen | 计算机屏幕（默认）。 |
| tty | 电传打字机以及类似的使用等宽字符网格的媒介。 |
| tv | 电视机类型设备（低分辨率、有限的滚屏能力）。 |
| projection | 放映机。 |
| handheld | 手持设备（小屏幕、有限带宽）。 |
| 打印预览模式/打印页面。 | |
| braille | 盲人点字法反馈设备。 |
| aural | 语音合成器。 |
| all | 适用于所有设备。 |
总结：可以通过link标签中的media属性来让网页的呈现效果更适应多变的场景。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3255.html
微信扫一扫 
支付宝扫一扫 