现在的位置: 首页 -> 前端学习 -> CSS -> 网页如何为打印设置单独的css样式

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

2017-01-25 23:14评论数 0 ⁄ 被浏览 8217 views+

有时候有这样的需求:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又想呈现另一种样式。


此时可以用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属性来让网页的呈现效果更适应多变的场景,让其更智能。


 

文章出自:https://www.daixiaorui.com/read/236.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 0 条评论  @我要评论

    您的每一个评论都是对我的一份支持

     博客二维码

    昵称 *

    邮箱 *