css 媒体查询
CSS3 Media Queries 实现响应式设计。其实就是根本屏幕的宽度不同加载不同的样式，也可以针对不同的区域如果改变屏幕宽度，也加载不同样式。
Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。
[code]@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}[/code]
如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。
[code]<link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”small.css” />[/code]
Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
[code]@media screen and (min-width: 900px) {
.class {
background: #666;
}
}[/code]
Multiple Media Queries
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
[code]@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}[/code]
可以参考以下的文章来源：http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html
测试1