Bootstrap pc pad phone 响应式布局

主页面 media.html

    
    
    
    /*1000px 以上屏幕显示*/
    
    /*pad 640-1000px 屏幕显示*/
    
    /*phone 640px以下 屏幕显示*/
    


    
        
Header
        
Left
        
Main
        
Right
        
Footer
    

PC端 pc.css

/*1000px 以上屏幕显示*/

    h2{color:yellow;font-size:4em}
    section#container{
        width:1160px;
    }
    section#main {
        width:740px;
    }

pad端pad.css

/*pad 640-1000px 屏幕显示*/

        h2 {color:green;font-size:2.5em}
        section#container{
            width:600px;
        }
        #left {
            width:160px;            
        }
        section#main{
            width:430px;
        }
        #right {
            display:none;
        }

phone端 phone.css

    /*phone 640px以下 屏幕显示*/

        h2 {color:red;font-size:1.5em}
        section#container {
            width:400px;
        }
        #left {
            float:left;
            width:100%;
            line-height:100px;
        }
        section#main {
            float:left;
            width:100%;
            line-height:200px;
            margin-left:0px;
        }
        #right {
            float:left;
            width:100%;
            line-height:100px;
            display:none;
        }

浏览器输出

pc端

pad端

phone端