如何单独设置打印网页的样式

如何单独设置打印网页的样式

做项目,有些网页需要打印,很多时候,是导出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 手持设备(小屏幕、有限带宽)。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

 

总结:可以通过link标签中的media属性来让网页的呈现效果更适应多变的场景。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3255.html

(0)
江山如画的头像江山如画管理团队
上一篇 2019年2月14日 下午3:38
下一篇 2019年2月15日 下午1:48

99%的人还看了以下文章

发表回复

登录后才能评论