CSS 3 Media Queries 学习小结

回顾CSS 2.1中的媒体类型

CSS中样式表的作用就是用来控制网页的显示效果。随着科技的进步，网页的访问终端也多了起来。为了网页能适就不同设备，在CSS 2.1中定义了媒体类型，并且部分CSS属性也仅仅为特定的媒体而设计。比如：“font-size”属性也就只适用用屏幕和打印设备。由于媒体类型的不同，导致在不同设备显示不同异很大。于是在CSS 2.1中引入了媒体类型，并可以根据类型应用不同的样式表文件。

为不同的媒体指定不同的样式表

在说明为不同媒质调用来同的样式表之前，我们先来认识一下CSS中公认的媒体类型：

公认的媒体类型
可指定的值	设备类型
all（所有）	适用于所有设备。
braille（盲文）	用于盲文触摸反馈设备。
embossed（凸字）	用于分页盲文印刷（盲文打印机）。
handheld（手持）	用于手持设备（小屏幕、便携设备）。
print（印刷）	用于分页材料以及打印预览模式下在屏幕上的文档视图。
projection（投影）	用于投影演示文稿，例如投影仪。
screen（屏幕）	主要用于彩色计算机屏幕。
speech（语音）	用于语音合成器。
tty（电传打字机）	用于使用等宽字符的媒体（一般为栅格媒介。例如电传打字机、终端、显示能力有限的便携设 备）。(不就用’px’)
tv（电视）	用于电视机类型设备（低分辨率、颜色、限制滚动能力、声音有效）。

以上表格内容参考自： W3C CSS2 / media

下面来简单说一下，怎么为不的访问设备指定不同的样式。

你可以向下面这种方式来应用不同设置的样式表文件：

1. <linkrel="stylesheet"href="style.css"media="print"/><!--定义打印样式-->
2. <linkrel="stylesheet"href="mobile.css"media="handheld"/><!--手持设备样式-->

在样式表文件中，你可以像这样指定不同的样式：

1. @media screen {
2. body {font-size:12px}
3. }
4. @mediaprint{
5. body {font-size:10pt;}
6. }

CSS 3中 Media Queries语法简介

在CSS 3对设备的判断能力进一步加强了。比如说可以直接获取浏览器窗口的当前高度，当前宽度，设备分辨率，浏览器方向等13种设备特征。并且，大部分设备特征都可以指定min/max前缀，用来进行逻辑判断。具体内容如下表所示：

13种设备特征说明
特征	可指定的值	是否可用min/max前缀	特征说明
width	带单位的长度数值 例如：40px	y	浏览器窗口当前的宽度
height	带单位的长度数值 例如：40px	y	浏览器窗口当前的高度
device-width	带单位的长度数值 例如：40px	y	设备分辨率的宽度值
device-height	带单位的长度数值 例如：40px	y	设备分辨率的高度值
orientation	只能指定两个值： portrait或landscape	n	浏览器窗口的方向(纵向、横向)。当窗口高度大于等于宽度时，该特性值为portrait,否则为landscape
aspect-ratio	比例值 例如：16/9	y	浏览器窗口的纵横比，即为:宽度值/高度值
device-aspect-ratio	比例值 例如：16/9	y	屏幕分辨率的纵横比，即为：宽度值/高度值
color	整数值	y	设备使用多少位的颜色值，若不是彩色设备，则为0
color-index	整数值	y	色彩表中的色彩数
monochrome	整数值	y	单色帧缓冲器中每像素的字节数
resolution	分辨率值,如：300dpi	y	设备分辨率
scan	只能指定两个值： progressive或interlace	n	电视设备的扫描方式。progressive表示逐行扫描；interlace表示隔行扫描
grid	只能指定：0、1	n	设备是基于栅格还是位图。基于栅格为1，否则为0

Media Queries的使用方法如下所示：

1、直接在样式表文件中调用

1. @media设备类型and(设备特性){
2. /*样式代码*/
3. }

and:and关键字是用来指定某种设备类型的某种特性的值满足某个条件时所使用的样式，譬如以下代码就表示当设备窗口宽度大于600px时改变main的所用的样式。

1. @media screen and(min-width:600px){
2. #main {
3. width:auto;
4. background:url(../img/banner.jpg)no-repeat;
5. }
6. }

当然，我们也可以用”,”分隔，实现多条语句应用同一个样式

1. @media screen and(min-width:600px),@media screen and(max-width:2000px){
2. #main {
3. width:auto;
4. background:url(../img/banner.jpg)no-repeat;
5. }
6. }

在样式中，我们还可以使用only,not等关键字。not表示对后面的表达式执行取反操作。

1. /***
2. 对not后面的语句执行取反操作
3. 即：除便携设备之外的其它设备或非彩色便携设备
4. ***/
5. @medianot handheld and(color){
6. /*对应样式代码*/
7. }
8. /*样式代码将被使用在所有非彩色设备中*/
9. @media all and(not color){
10. /*对应样式代码*/
11. }

2、当然你还可以在引入样式表时使用：

1. <linkrel="stylesheet"href="style.css"media="screen and (min-width:1000px)"/>

3、在样式表用引入其它的样式表文件

1. @import"url(color.css)" screen and(min-width:1000px);

关于以上的设备类型与CSS 2.1中的相同。你可以见上表。

下面是一个基于media queries响应式布局实例：

查看DEMO  下载DEMO

在智能手机中的CSS 3 Media Queries

在iphone和android手机中的内置浏览器对CSS 3的媒体查询表达式提供了支持。但是你可能在实践的时候，却出现了问题。比如说上面的DEMO在移动浏览器中理论上应该显示3个div元素从上往下排列显示的，但实际情况却是两栏显示。那么，到底是什么情况呢？

原来是因为在移动浏览器中，存在一个默认的虚拟窗口宽度（如：android browser默认为800px,IE默认为974px,Opera默认值为850px,而Iphone默认值为800px）。当浏览器以这个虚拟窗口宽度进行渲染时，便与实际你看到的出现了偏差。在这种情况下，可以利用<meta>标签来指定浏览器来处理本页面时按照多少像素的窗口宽度渲染，代码如下：

1. <metaname="viewport"content="width=320px"/>

以上代码表示以宽度320px来进行渲染。

当然我们可以让其1:1来显示：

1. <metaname="viewport"content="width=device-width"/>

所以，在移动设备上要显示正常，不要忘记上面的一行代码。

关于Media Queries的兼容性

CSS 3 Media Queries固然好用，但要是很多浏览器都不支持，使用起来就很蛋疼了。

关于CSS 2.1中，对媒体设备的判断，所有浏览器都提供了支持。下表中列出了CSS 3 Media Queries的支持情况：

各浏览器对CSS3 Media Queries支持情况
IE	5.5~8.0完全不支持；9+完全支持
Firefox	2.0、2.3完全不支持；3.5+完全支持
Chrome	4.0+完全支持
Safari	3.1、3.2部分支持；4.0+完全支持
Opera	9.0不支持;9.5+完全支持
ISO Safari	3.2+完全支持
Opera Mini	5.0-7.0完全支持
Android Browser	2.1+完全支持
Blackberry Browser	7.0,10.0完全支持
Opera Mobile	10.0+完全支持
Chrome for Android	27.0完全支持
FireFox for Android	22.0+完全支持

看了以上我们就知道，在移动设备上CSS 3 Media Queries几乎完全支持。而桌面平台下，只有IE6,IE7,IE8不支持。下面，我们就着重来解决一下IE低版本问题。百度一下，发现已经有大牛解决了用JavaScript代码解决了此问题。你只用简单的引入css3-mediaqueries.js就可以了。

1. <!--[if lt IE 9]>
2. <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
3. <![endif]-->

在本文的最后，也给几个国外优秀的CSS 3响应式网站。

• http://enochs.co.uk/
• http://oliverrussell.com/
• http://foodsense.is/

参考文献

• 本文大部分内容参考来自《HTML 5与CSS 3权威指南》
• 浏览器对CSS Media Queries支持情况参考：http://caniuse.com/css-mediaqueries

原创文章，转载请注明出处：小天地，大世界[http://www.lyblog.net/]
文章地址：http://www.lyblog.net/?p=319