酷炫的响应式布局

在css文件中可以添加筛选条件，告诉css在何种条件下用何种css代码，这可以用来实现响应式布局。

实现途径有两种，一种是通过控制引入的css文件来实现：

media是条件筛选语句，screen表示媒体类型，and表示并且，min-400px表示屏幕大于等于400px的时候引入a.css。

又如

表示屏宽在400px和800px之间时引入b.css

媒体类型css2中给出了十种，screen表示彩色电脑屏幕，具体可见http://www.w3.org/TR/CSS2/media.html#media-types，列举如下：

all 所有设备

aural 听觉设备

braille 点字触觉设备

handle 便携设备，如手机，平板电脑

print 打印预览图等

projection 投影设备

screen 显示器、笔记本等

tty 如打字机等终端设备

tv 电视机等

embossed 盲文打印机

and表示条件关系，表示并且，另外还有not（排除某种设备），only（限定某种设备）

第二种方法是在css文件中写入，关键字是@media，@media之后为条件选择语句，例如：

@media (min-400px) and (max-800px){

.left{

float:left;

}

表示在屏宽介于400px和800px之间时.left有float:left的属性。

另附demo：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <style>
        .left{
            background: lightcoral;
        }
        .right{
            background: lightgoldenrodyellow;
        }
        .middle{
            background: lightsalmon;
        }
        @media (min-980px) {
            .left{
                float:left;
                width: 33%;
                height: 600px;
            }
            .right{
                float:left;
                width: 33%;
                height: 600px;
            }
            .middle{
                float:left;
                width: 33%;
                height: 600px;
            }
        }
        @media (max-980px) and (min- 600px) {
            .left, .middle{
                float:left;
                width: 50%;
                height: 600px;
            }
            .right{
                width: 100%;
                height: 600px;
                float: left;
            }
        }
        @media (max- 600px){
            .left, .middle, .right{
                width: 100%;
                float: left;
                height: 200px;
            }
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>

</html>

最后，感谢http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 作者的详细讲解！