响应式布局

1.css中的Media Query(媒介查询)：

• 设备宽高：device-width,device-height
• 渲染窗口的宽高：width，height
• 设备的手持方向：orientation
• 设备的分辨率：resolution

2.使用方法：

• 外联样式

  通过关键字导入css文件

• 内嵌样式

    通过 在.html 文件中借助关键字设置

3.Bootstrap库

通过关键字“@media”实现
举例：
html文件

.css文件

/*screen min width 960px*/
@media screen and (min-width: 960px) {
    .heading,.container,.footing{
        width: 960px;
    }
    .left,.main,.right{
        float: left;
        height: 500px;
    }
    .left,.right{
        width: 200px;
    }
    .main{
        margin: 0px 5px;
        width: 550px;
    }
    .container{
        height: 500px;
    }
}
/*屏幕尺寸min-width: 600px，max-width: 960px*/
@media screen and (min-width: 600px) and (max-width: 960px) {
    .heading,.container,.footing{
        width: 600px;
    }
    .left,.main{
        float: left;
        height: 400px;
    }
    .right{
        display: none;
    }
    .left{
        width: 160px;
    }
    .main{
        width: 435px;
        margin-left: 5px;
    }
    .container{
        height: 400px;
    }
}
/*屏幕尺寸最大为600px*/
@media screen and (max-width: 600px) {
    .heading,.container,.footing{
        width: 400px;
    }
    .left,.right{
        width: 400px;
        height: 100px;
    }
    .main{
        margin-top: 10px;
        width: 400px;
        height: 200px;
    }
    .right{
        margin-top: 10px;
    }
    .container{
        height: 420px;
    }
}