快速业务通道

media query(媒体查询)和media type(媒体类型)

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-02

详情请看这里:http://webkit.org/specs/MediaQueriesExtensions.html

firefox

firefox也提供一些自己的扩展,不过由于firefox浏览器的手机版现在还很弱,所以很少会用到,感兴趣的同学可以到https://developer.mozilla.org/En/CSS/Media_queries查阅。

max与min

细心的同学可能已经注意到前面用到的这两个关键词,他们是要配合支持它们的属性使用的,它们的意义与我们常用的max-width和minwidth等类似。

各属性对max和min的支持在前面的属性列表中有给出,这里是一个详细的列表:

height min-height max-height
device-width min-device-width max-device-width
device-height min-device-height max-device-height
aspect-ratio min-aspect-ratio max-aspect-ratio
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio
color min-color max-color
color-index min-color-index max-color-index
Monochrome min-monochrome max-monochrome
Resolution min-resolution max-resolution

not/only

媒体类型还支持 not和only关键字,它们可以用来更方便的定位某个媒体设备:

not:排除某种制定的媒体类型

@media not print and (color){
}

only:指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器:

@media only screen and (color){
}

media query的浏览器支持:

  • IE 9以下不支持
  • Firefox 3.5+(Gecko 1.9.1+)支持
  • Opera 9.5+完全支持
  • Opera mini 5支持
  • webkit 支持大部分属性(safari 3.0的内核版本是522,iPhone 1代的safari的内核版本是524,webkit大概从这个时候开始支持media query,但是对部分属性比如projection支持不好)
  • iPhone OS 3.2之前的版本不支持orientation属性,iPad和iPhone 4支持该属性。
  • iPhone Safari不支持orientation(iPh

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号