CSS教程：彻底弄明白CSS3的Media Queries.doc

HYPERLINK"http://www.webjx.com/css/index.html"\o"CSS教程"CSS教程：彻底弄明白CSS3的MediaQueries
-
移动时代，是任何Web设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了CSS3。
CSS3的MediaQueries
在CSS2时代，如果你曾经为你的网站设计过打印版CSS，就会明白CSS3MediaQueries的作用，不过，CSS3的MediaQueries比CSS2的MediaType更实用，事实上，CSS2的MediaType并不曾被多少设备所支持过。CSS3的MediaQueries可以帮你获取以下数据：
浏览器窗口的宽和高
设备的宽和高
设备的手持方向，横向还是竖向
分辨率
如果用户有一个支持MediaQueries的设备，我们就可以为该设备编写专门的CSS，让网站适应这个设备的小屏幕，英国的Web技术大会dConstruct便基于该技术推出他们的2010年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图：

这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在iPhone，OperaMini，Android等设备上有完全一致的表现。
使用MediaQueries为手机创建单独的CSS
我们举一个简单的两栏式结构的例子。

为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小header部分的图片大小。
使用MediaQueries最直接的方法是，在你的CSS代码中，加一段独立代码分支，如下：
@mediaonlyscreenand(max-device-width:480px){

}
codehostedbyHYPERLINK"http://snipt.net/comsharp/comsharp"snipt.net
@mediaonlyscreenand(max-device-width:480px){

}
codehostedbysnipt.net

@mediaonlyscreenand(max-device-width:480px){

}

接着，在这个分支中，为小屏幕编写独立的CSS定义，这些定义可以覆盖桌面版CSS中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的CSS将布局变成一栏式，且使用了小尺寸的Header图片：
@mediaonlyscreenand(max-device-width:480px){
div#wrapper{
width:400px;
}

div#header{
background-image:url(media-queries-phone.jpg);
height:93px;
position:relative;
}

div#headerh1{
font-size:140%;
}

#content{
float:none;
width:100%;
}

#navigation{
float:none;
width:auto;
}
}
codehostedbyHYPERLINK"http://snipt.net/comsharp/comsharp-1"snipt.net
@mediaonlyscreenand(max-device-width:480px){
div#wrapper{
width:400px;
}

div#header{
background-image:url(media-queries-phone.jpg);
height:93px;
position:relative;
}

div#headerh1{
font-size:140%;
}

#content{
float:none;
width:100%;
}

#navigation{
float:none;
width:auto;
}
}
codehostedbysnipt.net

@mediaonlyscreenand(max-device-width:480px){
div#wrapper{
width:400px;
}

div#header{
background-image:url(media-queries-phone.jpg);
height:93px;
position:relative;
}

div#headerh1{
font-siz