ITPub博客

首页 > Linux操作系统 > Linux操作系统 > Media Queries语法总结

Media Queries语法总结

原创 Linux操作系统 作者:broadviewbj 时间:2012-05-29 16:59:47 0 删除 编辑

Media Queries语法总结

Media Queries的语法如下所示:

@media [media_query] media_type and media_feature

使用Media Queries样式模块时都必须以“@media”方式开头。

media_query表示查询关键字,在这里可以使用not关键字和only关键字。not关键字表示对后面的样式表达式执行取反操作。例如如下代码:

@media not screen and (max-device-width:480px)

only关键字的作用是,让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式。例如如下代码:

@media only screen and (max-device-width:480px)

对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

虽然media_query这个类型在整个Media Queries语法中并不是必需的类型,但是有时候在实际开发过程中却是非常重要的查询参数类型。

media_type参数的作用是指定设备类型,通常称为媒体类型。实际上在CSS2.1版本时已经定义了该媒体类型。表6-1列出了media_type允许定义的10种设备类型。

 

 

media_feature的主要作用是定义CSS中的设备特性,大部分移动设备特性都允许接受min/ max的前缀。例如,min-width表示指定大于等于该值;max-width表示指定小于等于该值。

6-2显示media_feature设备特性的种类一览表。

 

 

到目前为止,Media Queries样式模块在桌面端都得到了大部分现代浏览器的支持。例如IE 9浏览器、Firefox浏览器、Safari浏览器、Chrome浏览器、Opera浏览器。但是IE系列的浏览器中只有最新版本才支持该特性,IE8以下的版本不支持Media Queries

从移动平台来说,基于两大平台AndroidiOSWeb浏览器也都得到了良好的支持。同时,黑莓系列手机也支持Media Queries特性。

 

 

 

本文节选自《HTML5移动Web开发指南》一书 唐俊开著

图书详细信息:http://space.itpub.net/?uid-13164110-action-viewspace-itemid-731303

1.jpg

2.jpg

HTML5移动Web开发指南.jpg

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/13164110/viewspace-731386/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-02-22

  • 博文量
    1031
  • 访问量
    1598231