`
hilliate
  • 浏览: 135040 次
  • 性别: 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,所有输出设备。

分享到:
评论

相关推荐

    CSS3 Media Query CSS3媒介查询

    **CSS3 Media Queries详解** CSS3 Media Queries是Web开发中的一个重要工具,它允许开发者根据设备的物理特性,如视口宽度、设备像素比等,来应用不同的样式规则,从而实现响应式网页设计。这一功能使得网页能更好...

    CSS布局 案例详解

    本案例详解将深入探讨CSS布局的各个方面,帮助你掌握创建高效、响应式和美观网页布局的关键技巧。 一、盒模型 CSS布局的基础是盒模型,每个HTML元素都被视为一个矩形的盒子,包含内容区、内边距(padding)、边框...

    CSS经典技巧,学习CSS更轻松

    &lt;link rel="stylesheet" type="text/css" href="screen.css" media="screen"&gt; &lt;link rel="stylesheet" type="text/css" href="print.css" media="print"&gt; ``` 打印样式表可以简化页面布局,例如隐藏不必要的元素、...

    使用CSS画爱心的过程详解

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助。 第一步: ...style media=screen&gt; .heart-body { width: 500px; margin: 100px auto; position: relative; }

    详解CSS3中@media的实际使用

    在CSS3中,`@media`规则是响应式网页设计的核心,它允许我们根据不同的设备特性和视口大小来定义和应用不同的样式。`@media`查询让我们能够创建适应各种屏幕尺寸、分辨率和颜色深度的多样的用户体验。 首先,我们来...

    DIV+CSS很实用的20个技巧.pdf

    例如,`&lt;link rel="stylesheet" href="stylesheet.css" media="screen"&gt;`用于屏幕,`&lt;link rel="stylesheet" href="printstyle.css" media="print"&gt;`用于打印。在打印样式表中,可以隐藏某些元素,调整布局,以适应...

    详解CSS3中Media Queries的相关使用

    在现代网页设计中,为了确保网页在各种不同的设备和屏幕尺寸上都能正确显示,并提供良好的用户体验,CSS3引入了一个非常重要的功能,即Media Queries(媒体查询)。媒体查询允许设计师和开发者根据不同的条件应用...

    CSS 实例基础教程

    **CSS基础教程详解** CSS,全称Cascading Style Sheets,中文译为“层叠样式表”,是网页设计中不可或缺的一部分,它负责控制网页的布局和视觉表现,使得网页呈现更加美观、结构清晰的效果。通过CSS,我们可以轻松...

    jqGridDemoAPI帮助文档

    &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css"/&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css"/&gt; ...

    css学习笔记

    &lt;link rel="stylesheet" href="test.css" type="text/css" media="screen"&gt; ``` 这是最常用的方式之一,尤其适合大型项目,便于管理和维护。 4. **导入样式**:通过`@import`语句在其他CSS文件中导入样式。 `...

    css样式表学习手册.doc

    &lt;link rel="stylesheet" type="text/css" href="./mystyle.css" media="screen"&gt; ``` 2. **内部样式表**:将CSS样式直接写入HTML文档的`&lt;head&gt;`部分,使用`&lt;style&gt;`标签包裹。适用于单个页面的特殊样式需求。 ...

    css+div的技巧10

    &lt;link type="text/css" rel="stylesheet" href="/stylesheet.css" media="screen"/&gt; &lt;link type="text/css" rel="stylesheet" href="printstyle.css" media="print"/&gt; ``` 这样,在打印时会自动应用 `printstyle....

    Dive_into_Responsive_Web_Design(响应式设计电子书)

    &lt;link rel="stylesheet" href="main.css" media="screen"/&gt; &lt;link rel="stylesheet" href="paper.css" media="print"/&gt; &lt;link rel="stylesheet" href="tiny.css" media="handheld"/&gt; ``` - **使用`&lt;style&gt;`...

    微信小程序 基础知识css样式media标签

    我们可以使用media标签来区分调用哪个css样式,例如使用media=”print”来表示当执行打印文档时,使用print.css样式。这样可以使文档更适合打印,比如增加页面宽度、屏蔽一些打印时不需要的内容。Media标签的标准...

    css响应式有哪些常用布局_css响应式有什么布局.pdf

    【CSS响应式布局详解】 CSS响应式布局是一种现代网页设计技术,旨在确保网站在不同设备(包括手机、平板电脑和桌面电脑)上都能提供良好的用户体验。这种布局方式的核心理念是“一次设计,到处适用”,避免为每种...

    jqGrid帮助文档

    &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css"/&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css"/&gt; ...

Global site tag (gtag.js) - Google Analytics