典型的响应式布局实例代码 

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>响应式布局-样式表中内嵌法</title>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="width=device-width, initial-scale=1"/>  
        <link rel="stylesheet" type="text/css" href="css/main.css">  
    </head>  
    <body>  
        <div class="header">header</div>  
        <div class="container">  
            <div class="sidebarLeft">sidebarLeft</div>  
            <div class="main">main</div>  
            <div class="sidebarRight">sidebarRight</div>  
        </div>  
        <div class="footer">footer</div>  
    </body>  
    </html>

main.css:

    *{margin:0;padding:0;}  
    body{  
        font:18px/20px "Microsoft YaHei",arial,serif;  
        color:#fff;  
        background:#fff;  
    }  
    img{border:0;}  
    a{text-decoration:none;}  
      
      
    .header,  
    .container,  
    .footer{  
        margin-left:auto;  
        margin-right:auto;  
        margin-top:10px;  
        text-align:center;  
    }  
      
    .header{  
        height:100px;  
        background:#333;  
    }  
      
    .sidebarLeft,  
    .main,  
    .sidebarRight{  
        background:#333;  
    }  
      
    .footer{  
        height:100px;  
        background:#333;  
    }  
      
      
    @media screen and (min-width:960px){  
        .header,  
        .container,  
        .footer{  
            width:960px;  
        }  
      
        .sidebarLeft,  
        .main,  
        .sidebarRight{  
            float:left;  
            height:400px;  
        }  
      
        .sidebarLeft,  
        .sidebarRight{  
            width:200px;  
        }  
      
        .main{  
            margin-left:10px;  
            margin-right:10px;  
            width:540px;  
        }  
      
        .container{  
            height:400px;  
        }  
    }  
      
    @media screen and (min-width:600px) and (max-width:960px){  
        .header,  
        .container,  
        .footer{  
            width:600px;  
        }  
      
        .sidebarLeft,  
        .main{  
            float:left;  
            height:400px;  
        }  
      
        .sidebarRight{  
            display:none;  
        }  
      
        .sidebarLeft{  
            width:160px;  
        }  
      
        .main{  
            margin-left:10px;  
            width:430px;  
        }  
      
        .container{  
            height:400px;  
        }  
    }  
      
    @media screen and (max-width:600px){  
        .header,  
        .container,  
        .footer{  
            width:400px;  
        }  
      
        .sidebarLeft,  
        .sidebarRight{  
            width:400px;  
            height:100px;  
        }  
        .main{  
            margin-top:10px;  
            width:400px;  
            height:200px;  
        }  
      
        .sidebarRight{  
            margin-top:10px;  
        }  
      
        .container{  
            height:420px;  
        }  
    }  
      
    /* 
    //完整版 
    .header, 
    .container, 
    .footer{ 
        margin-left:auto; 
        margin-right:auto; 
        width:960px; 
        margin-top:10px; 
        text-align:center; 
    } 
     
    .header{ 
        height:100px; 
        background:#333; 
    } 
     
    .sidebarLeft, 
    .main, 
    .sidebarRight{ 
        background:#333; 
        float:left; 
        height:400px; 
    } 
     
    .sidebarLeft, 
    .sidebarRight{ 
        width:200px; 
    } 
     
    .main{ 
        margin-left:10px; 
        margin-right:10px; 
        width:540px; 
    } 
     
    .container{ 
        height:400px; 
    } 
     
    .footer{ 
        height:50px; 
        background:#333; 
    } 
     
    */

 

posted @ 2018-03-18 00:11  糖果的二师兄  阅读(658)  评论(0)  编辑  收藏  举报