媒体查询:支持不同的视口
2013-03-30 13:58
295 查看
没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定CSS样式。
如:
相对于css3,媒体查询能问的问题要多一点,例如,媒体查询可以问:“你是一块纵向放置的显示屏吗?”
如:
还可以在媒体查询开头追加not则会天道该查询的逻辑。
如:
也可以将多个表达式组合在一起。如,限制只有视口宽度大于800px的显示屏设备才会加载该文件。
如:
更进一步,还可以写一个媒体查询列表。查询列表中的任何一个查询为真,则加载文件。
如:
这里有几点需要注意:
媒体查询之间使用逗号分隔。
媒体类型与表达式之间以and连接,每个媒体类型可以有多个表达式。
你会注意到在projection之后,没有and,也没有后续的表达式,意味着只要是projection就满足条件。本例中,样式会应用于投影仪。
媒体类型可以省略,如@media (min-width: 480px) 默认的媒体类型为all。
也可以创建一个查询范围。
如:
CSS属性用于声明如何呈现页面的信息;媒体特性则是一个用于判断输出设备是否满足要求的表达式。
大部分媒体特性支持min和max前缀,表示应用于大于等于或者小于等于某个值的情况。
CSS属性要求必须有值;媒体特性则可以没有值,媒体查询表达式的返回值除了true就是false。
CSS属性可以接受多个复合值作为值;媒体特性只接受单个值。
height:显示区域的高度
device-width:设备屏幕的宽度
device-height:设备屏幕的高度
orientation:横屏或竖屏
aspect-ratio:显示区域的宽高比
device-aspect-ratio:设备屏幕宽高比
resolution:设备屏幕的分辨率
color: number of bits per color component of the output device
color-index:number of entries in the color lookup table of the output device
monochrome:number of bits per pixel in a monochrome frame buffer (0 if the device is not monochrome.)
IE9支持以上媒体特性
媒体查询基本语法
将下面这段代码插入到页面后,调整浏览器大小看效果!body{ background-color:grey; } @media screen and (max-width:960px){ body{ background-color:red; } } @media screen and (max-width:768px){ body{ background-color:orange; } } @media screen and (max-width:550px){ body{ background-color:yellow; } } @media screen and (max-width:320px){ body{ background-color:green; } }接下来,让我们继续分析媒体查询,学习如何对其进行充分利用。
1.<link>方式
在css2中,我们知道可以通过<link>标签的media属性为样式表指定设备类型(如显示屏幕或打印机)如:
<link rel='styleesheet' type='text/css' media ='screen' href='screen-styles.css' >
相对于css3,媒体查询能问的问题要多一点,例如,媒体查询可以问:“你是一块纵向放置的显示屏吗?”
如:
<link rel='styleesheet' type='text/css' media ='screenand (orientation:portrait)' href='portrait-screen-styles.css' >
还可以在媒体查询开头追加not则会天道该查询的逻辑。
如:
<link rel='styleesheet' type='text/css' media ='notscreen and (orientation:portrait)' href='portrait-screen-styles.css' >
也可以将多个表达式组合在一起。如,限制只有视口宽度大于800px的显示屏设备才会加载该文件。
如:
<link rel='styleesheet' type='text/css' media ='screen and (orientation:portrait)and (min-width:800px)' href='800width-portrait-screen-styles.css' >
更进一步,还可以写一个媒体查询列表。查询列表中的任何一个查询为真,则加载文件。
如:
<link rel='styleesheet' type='text/css' media ='screen and (orientation:portrait) and (min-width:800px), projection' href='800width-portrait-screen-styles.css' >
这里有几点需要注意:
媒体查询之间使用逗号分隔。
媒体类型与表达式之间以and连接,每个媒体类型可以有多个表达式。
你会注意到在projection之后,没有and,也没有后续的表达式,意味着只要是projection就满足条件。本例中,样式会应用于投影仪。
媒体类型可以省略,如@media (min-width: 480px) 默认的媒体类型为all。
2.@import方式
如:@import url("phone.css") screen and (max-width:360px);
也可以创建一个查询范围。
如:
@import url("phone.css") screen and (max-width:360px and (max-width:460px));
3.媒体特性介绍
在语句构造上,媒体特性非常类似于CSS的属性,都由名称和值组成。下面列出媒体特性和CSS属性的不同点:CSS属性用于声明如何呈现页面的信息;媒体特性则是一个用于判断输出设备是否满足要求的表达式。
大部分媒体特性支持min和max前缀,表示应用于大于等于或者小于等于某个值的情况。
CSS属性要求必须有值;媒体特性则可以没有值,媒体查询表达式的返回值除了true就是false。
CSS属性可以接受多个复合值作为值;媒体特性只接受单个值。
4.主要媒体特性
width:显示区域的宽度height:显示区域的高度
device-width:设备屏幕的宽度
device-height:设备屏幕的高度
orientation:横屏或竖屏
aspect-ratio:显示区域的宽高比
device-aspect-ratio:设备屏幕宽高比
resolution:设备屏幕的分辨率
color: number of bits per color component of the output device
color-index:number of entries in the color lookup table of the output device
monochrome:number of bits per pixel in a monochrome frame buffer (0 if the device is not monochrome.)
IE9支持以上媒体特性
参考
W3C CSS3 Media Queries 参考: http://www.w3.org/TR/css3-mediaqueries/ Media type与Media query(一篇不错的介绍文章): http://www.qianduan.net/media-type-and-media-query.html[/code]
相关文章推荐
- 媒体查询:支持不同的视口
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第2章 媒体查询:支持不同的视口
- css媒体查询/jquery mobile根据不同设备设定不同布局
- 关于IE8以及以下版本不支持媒体查询的解决方案
- CSS媒体查询,CSS根据不同的分辨率显示不同的样式
- 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询
- CSS3-多列-视口-媒体查询-弹性盒/弹性布局-Node介绍
- respond.js让IE8支持媒体查询
- 媒体查询(pc端,移动端不同布局)
- css媒体查询 @media适配不同大小窗口
- 响应式手机网站——视口约束&媒体查询
- 解决ie8不支持媒体查询
- 特性查询采用@supports规则,不同的浏览器支持不同的css属性
- (转)Entity Framework Extended Library (EF扩展类库,支持批量更新、删除、合并多个查询等)
- Android支持的媒体格式
- 创建索引,临时表,支持条件查询的分页 首页为1
- HTTP请求415错误 – 不支持的媒体类型(Unsupported media type)
- 解决“未启用当前数据库的 SQL Server Service Broker,因此查询通知不受支持。如果希望使用通知,请为此数据库启用 Service Broker”错误
- CSS3 Media Queries Css媒体查询
- 操作系统中数据文件与ORACLE数据库中查询的bytes大小不同的解析