media query(屏幕自适应布局)

<style>
     #container{
         margin:auto;
         width:750px;
     }
     #container>div{
        border:1px solid #aaf;
        text-align:left;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
         -webkit-box-sizing:border-box;
         border-radius:12px 12px 0 0;
         background-color:#ffc;
         padding:5px;
     }
     div #left{
         width:300px;
         height:230px;
         float:left;
     }
     div #main{
         width:450px;
         height:230px;
         float:left;
         clear:right;
     }
     div #right{
         width:750px;
         float:left;
     }
    /*设置浏览器宽度大于1000px时的cs样式*/

    @media screen and (min-width:1000px){
        #container{
            margin:auto;
            width:960px;
        }
        #container>div{
            border:1px solid #aaf;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            border-radius:12px 12px 0 0;
            background-color:#ffc;
            padding:5px;
        }
        div #left{
            width:240px;
            height:240px;
            float:left;
        }
        div #main{
            width:460px;
            height:240px;
            float:left;
            clear:none;
        }
        div #right{
            width:260px;
            float:left;
            height:240px;
        }
    }
 /*设置浏览器宽度小于480px时的cs样式*/
    @media screen and (max-width:480px){
        #container{
            margin:auto;
            width:450px;
        }
        #container>div{
            border:1px solid #aaf;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            border-radius:12px 12px 0 0;
            background-color:#ffc;
            padding:5px;
        }
        div #left{
            width:450px;
            height:140px;
            float:left;
        }
        div #main{
            width:450px;
            height:220px;
            float:left;
            clear:both;
        }
        div #right{
            width:450px;
            float:left;
            height:160px;
        }
    }
</style>

注意写法and与后面的括号有空格。