媒介查询demo

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒介查询</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #container{
            width:100%;
            height: 500px;
            background: pink;
        }

        /*    小于500px*/
        @media only screen and (max-width:500px ) {
            /*小于500时布局的样式控制开始*/
            #a,#b,#c{
                float:none;
            }
            #a{
                background: red;
                width:100%;
                height: 500px;
            }
            #b{
                background: yellow;
                width:100%;
                height: 500px;
            }
            #c{
                width:100%;
                height: 500px;
                background: blue;
            }
            /*小于500时布局的样式控制结束*/
        }
        /*    大于500px*/
        @media only screen and (min-width:500px ) {
            /*小于500时布局的样式控制开始*/
            #a,#b,#c{
                float:left;
            }
            #a{
                background: red;
                width:33.3%;
                height: 500px;
            }
            #b{
                background: yellow;
                width:33.3%;
                height: 500px;
            }
            #c{
                width:33.3%;
                height: 500px;
                background: blue;
            }
            /*小于500时布局的样式控制结束*/
        }
    </style>
</head>
<body>
        <div id="container">
            <div id="a">我是第一块</div>
            <div id="b">我是第二块</div>
            <div id="c">我是第三块</div>
        </div>

</body>
</html>

<!--
http://www.jb51.net/css/475563.html  css3 media 响应式布局实例
-->