Css3--Media query

内容提要：

1，介绍一下Media query是什么，为什么会出现Media query技术

2，Media query的基本用法

3，实际应用中遇到的一些问题

网络应用的发展最终会朝着轻便，快捷的方向发展，而这也就导致了诸多的硬件的改革，以前我们可以写一段代码样式，就可以移植到其他的机型上，因为他们的尺寸、分辨率都没有像现在的那么多的选择，而今，像android、iphone、ipad特别是android，分辨率有QVGA(320*240) 、VGA(640*480)、WVGA(800*480)；此外还有SVGA(800*600)等一些视频图形显示卡；

注意：这里的数字是指的分辨率，不是指屏幕的宽度；

这里扯开一下话题：因为现在android主流的分辨率是WVGA(800*480)，这是因为目前网页的宽度是800，所以WVGA更加适合用来浏览网页；SVGA即高级视频图形阵列（Super Video Graphics Array或Super VGA或SVGA)，由VESA为IBM兼容机推出的标准。分辨率为800x600（每像素4比特，16种颜色可选）。

由于这么多的分辨率的出现，所以网页在不同的分辨率下，显示出的效果就不太一样，当然也影响着布局的展示，会出现无法全屏显示，或者原有的布局不适应当前的屏幕，所以也就出现了Media query；这项技术是css2 media type 的一项扩展，但是之前的media type浏览器的支持并不像今天的media query这么普遍；先介绍一下media query可以做什么：

CSS3 的 Media Queries 可以帮你获取以下数据：

浏览器窗口的宽和高
设备的宽和高
设备的手持方向，横向还是竖向
分辨率

支持Media Queries的浏览器都是有：

可以简单的了解一下浏览器的内核结构

webkit是最早实现media query支持的浏览器内核之一，同时它也根据自己的需要搞了一些特有的扩展属性，最常用的有：

transform-2d	只用于支持使用 -webkit-transform实现2D变换的浏览器
transform-3d	只用于支持使用 -webkit-transform实现3D变换的浏览器
transition	只用于支持使用-webkit-transition实现变换效果的浏览器
animation	只用于支持使用-webkit-animation实现动画的浏览器

如何使用Media Queries媒体查询

媒体查询就像是一个CSS选择器或者如果你接触过数据库的话，就像是SQL查询语句。媒体查询实际上就是一种语法规

则，可以方便的从一大堆元素里获取几个元素。这样就方便你应对一些特定的尺寸或者指定一些特殊的解决方案了。媒体

查询的代码可以放在<head>元素里，也可以放在styleSheet样式表里的任何地方。但是需要注意的是，在任何时候，媒体查

询都必须以关键字media开头，后面跟你要显示的css样式。

（一）放在head标签中的写法如下：

media="only screen and (max-device-width:480px)">

（二）放在styleSheet样式表的写法如下：

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

/*css样式*/

}

【注意事项】：上面的两种写法都是针对老版iphone的解决方案（320x480的解决方案）。当然，不是说让你两个都用，

只要挑选适合你需求的那个写法来用就可以了。

问题：

通过max-device-width和min-device-width判断手机设备的最大宽度和最小宽度，对于QVGA屏幕的手机和VGA屏幕的手机，media query只能判断其中的一种，也就是说：当我使用media query在样式表中设置样式：QVGA跟VGA屏幕的手机样式表示分开写在相应的media query语句中；但是执行的时候手机根本就没有进行判断，结果后面的样式覆盖之前的样式；

原因可能是因为；media query是基于浏览器的内核判断的；决定权在于浏览器，而不在于手机的分辨率，android手机使用的是webkit，但是浏览器的宽度是800，是不是手机中的浏览器在执行media query的时候，只是对浏览器的宽度作出了判断，而没有对device进行判断；所以解决这个问题，需要让media query针对屏幕的分辨率进行判断；而不只是通过浏览器本身的宽度；例如在pc上进行演示的时候，可以通过调节浏览器(chrome)的宽度，进而media query匹配相应的样式；而在手机中，浏览器的宽度是固定的；所以也就很难匹配相应的样式；无论怎么的屏幕都只会选择同一个media query下的样式；

所以，media query还提供了获得机器本身的分辨率，横屏或者竖屏，扩展阅读1 中有提到，这也有涉及到了另一项media query功能：屏幕分辨率的判断；

你也可以从通过手机浏览器宽度自适应：通过判断打开网页的宽度，进而浏览器自身的宽度调节到与网页宽度相同，那么，浏览器的宽度是在不停的变化着，所以通过max-width or min-width进行判断；不过，这个想法自己还没有尝试过；

max-device-width和min-device-width：是对设备的最大宽度和最小宽度进行判断；例如：pc中浏览器的宽度可以拉伸或者挤压，宽度是可以变化的，而屏幕的分辨率是不会改变的；pc中可以通过改变浏览器的宽度进行模拟不同宽度的手持设备，而手持设备就有别与pc，它的浏览器的宽度是不能改变的，也有可能都是一样的宽度，不管屏幕分辨率是多少，也就是说：屏幕的分辨率和屏幕宽度是不同的；屏幕的宽度和浏览器的宽度也是不同的；max-width是对浏览器的宽度进行判断；

##扩展阅读：

1.http://www.cnbeta.com/articles/117181.htm

2.http://www.w3.org/TR/css3-mediaqueries/

3.http://blog.bingo929.com/div-css-web-design-to-next-level-with-css3.html#more-2508

4.http://www.xker.com/page/e2010/0711/97266_2.html

5.https://developer.mozilla.org/En/CSS/Media_queries

6.http://hi.baidu.com/ali_myself/blog/item/359ce20d28303ed77acbe1c7.html

7.http://dev.opera.com/articles/view/safe-media-queries/

后面我还会介绍一下有关HTML5和CSS3的一些基本常识，有兴趣可以关注一下http://www.slideshare.net/adamlu/html5css3-2679214；

posted on 2012-02-23 12:23 ThunderFox 阅读(955) 评论(0) 编辑收藏举报