项目开发：同一个页面，需要在浏览器中浏览是一种样式，而当要打印这个页面时候，又需要呈现另一种样式。
此时可以用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 ,本文观点不代表中国网页设计立场。
微信扫一扫 
支付宝扫一扫 99%的人还看了以下文章
-
css布局基础：浮动和清除浮动练习2
主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法： 方法1：通过overflow属性 方法2：通过clear属性 方法3：通过伪元素选择器（推荐） 效果图： 参考： <header> <img …
-
第8课：组织元素（span和div）
pan和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。 在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本…
-
JS实现开关效果，可单选和组选
JS实现的checkbox开关效果，可单个打开开关，也可一次关闭所有或打开所有开关。 <html> <head lang="en"> <meta charset="UTF-8"> <title>JS实现开关效果，可单选和组选|www.125jz.com</title…
-
CSS制作简洁的栏目/标题样式
CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…
-
鼠标放上去，图片上方动态显示半透明说明文字（源码）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>鼠标放上去，图片上方动态显示半透明说明文字（源码）|www.125jz.com</title> <…
