项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。
此时可以用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属性来让网页的呈现效果更适应多变的场景,让其更智能。
本文转载自daixiaorui博客,原文链接:https://www.daixiaorui.com/read/236.html ,本文观点不代表125jz立场。