`
hilliate
  • 浏览: 133223 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

引入css时的 media="screen" 详解

阅读更多

<link rel="stylesheet" type="text/css" media="screen" href="mysite-screen.css"
/>
<link rel="stylesheet" type="text/css" media="print" href="mysite-print.css" />  


  如果需要支持老版本的浏览器,那你就必须坚持使用css1的媒体描述符screen和print。它们是相互排斥的,因此在为屏幕显示而生成页面的时候,浏览器会忽略掉打印样式表,反之亦然。所以,每个样式表都需要包含相同的样式选择器,但是有不同的规则声明,以便为不同的输出设备分别生成页面样式。 screen (缺省值),提交到计算机屏幕;
print, 输出到打印机;
projection,提交到投影机;
aural,扬声器;
braille,提交到凸字触觉感知设备;
tty,电传打字机 (使用固定的字体);
tv,电视机;
all,所有输出设备。

分享到:
评论

相关推荐

    css framework 漂亮的CSS

    &lt;link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection"&gt; &lt;link rel="stylesheet" href="../css/print.css" type="text/css" media="print"&gt; &lt;!--[if IE]&gt; &lt;link rel=...

    简单介绍CSS设置打印页面的方法及css里media的使用

    在很多是时候往往要打印网页中的某一部分,而不是全部网页,所以告诉打印机要打印的部分,使用css进行...以上两行代码是引入外部css样式表,需要特别主义的是media属性值分别是screen和print,用来规定css样式表要服

    基于bootstrap的双日历时间段

    link rel="stylesheet" type="text/css" media="all" href="data/css/daterangepicker.css" /&gt; &lt;link rel="stylesheet" type="text/css" media="all" href="data/css/bootstrap.min.css" /&gt; &lt;link rel...

    CSS3 Media Queries详细介绍和使用实例

    link href=”css/reset.css” rel=”stylesheet” type=”text/css” media=”screen” /&gt; &lt;link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”all” /&gt; &lt;link href=”css/...

    一个渐变的banner图效果

    &lt;link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" /&gt; &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /&gt; &lt;div id="wrapper"&gt; &lt;a href=...

    HTML5 jQuery SVG兼容手机端图表插件代码.zip

    3.1.64" media="screen" rel="stylesheet" type="text/css" /&gt; &lt;link href="dist/css/vendor/foundation.css?3.1.64" media="screen" rel="stylesheet" type="text/css" /&gt; &lt;link rel="stylesheet" ...

    用CSS创建打印页面的具体步骤

    link href=”css/admin.css” rel=”stylesheet” type=”text/css” media=”screen” /&gt; &lt;link href=”css/admin-print.css” rel=”stylesheet” type=”text/css” media=”print” /&gt; media="screen...

    微信小程序中css样式media标签

    在css中我们使用media标签来区分调用哪个css样式,比如使用media=”print”来表示当执行打印文档时,使用print.css样式。这样使得文档更有得于打印,如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。   &lt;link ...

    CSS布局 案例详解

    CSS布局 案例详解 CSS布局 案例详解 CSS布局 案例详解CSS布局 案例详解 CSS布局 案例详解

    rainbow-master.rar

    网页代码片段高亮显示插件,多样式可选,亲测可用,详见demos演示...&lt;link href="../themes/css/pastie.css" rel="stylesheet" type="text/css" media="screen"&gt; &lt;code data-language="css"&gt; //样式文本 &lt;/code&gt;&lt;/pre&gt;

    JS版网站风格切换实例代码

    link media=”screen” href=”/css/default.css” rel=”stylesheet” type=”text/css” title=”default” /&gt; &lt;link media=”screen” href=”/css/blue.css” rel=”alternate stylesheet” type=”text/...

    ecshop jquery 放大镜效果

    link rel=”stylesheet” type=”text/css” href=”themes/default/style.css” media=”screen” /&gt; js文件 [removed]爱T-blog[removed] [removed]爱T-blog[removed] goods.dwt 找到 &lt;div class=”imgInfo”&gt; ...

    css 不同媒介的显示样式控制方式

    link rel=stylesheet type=text/css media=screen href=screen.css/&gt; //在打印时显示的样式 &lt;link rel=stylesheet type=text/css media=print href=print.css /&gt; 有不同的规则声明,不同的输出设备分别...

    leetcode中国-competitive-resources:https://godslayer201.github.io/competi

    media="screen"&gt; &lt;link\nhref='https://fonts.googleapis.com/css?family=Open+Sans:400,700'\nrel='stylesheet'\ntype='text/css'&gt; &lt;link rel="stylesheet" type="text/css" href="stylesheets/...

    CSS3中的Media Queries学习笔记

    一、Media Queries 支持的属性 二、关键字and – 结合多个媒体查询 not – ...link rel=stylesheet media=screen and (min-width:980px) href=desktop.css /&gt; &lt;link rel=stylesheet media=screen a

    好用的CSS框架,真的很好用

    &lt;link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /&gt; &lt;link rel="stylesheet" type="text/css" media="all" href="css/text.css" /&gt; &lt;link rel="stylesheet" type="text/css" media="all" ...

    layui从数据库中获取复选框的值并默认选中方法

    href="../../../static/js/css/layui.css" rel="external nofollow" media="all"&gt; &lt;link rel="stylesheet" type="text/css" href="../../../static/css/index-gb.css" rel="external nofoll

    日历控件js(有很多好看的样式)

    type="text/css" href="css/calendar-green.css" title="green" /&gt; &lt;link rel="stylesheet" type="text/css" href="css/calendar-win2k-1.css" title="win2k-1" /&gt; &lt;link rel="stylesheet" type="text/css" ...

    CSS浮动属性Float详解 什么是CSS Float?

    CSS浮动属性Float详解 什么是CSS Float?

    javascript 课程设计

    &lt;link href="css/style.css" rel="stylesheet" type="text/css" media="all" /&gt; &lt;!---&lt;link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'&gt;---&gt; &lt;link rel...

Global site tag (gtag.js) - Google Analytics