响应式布局

作者: 机器猫的百宝袋 | 来源:发表于2015-08-31 15:51 被阅读67次

响应式布局目录
九、HTML5响应式布局
响应式网页开发
响应式开发
js基础（6）
flex布局及常用属性
VUE响应式原理
响应式布局与自适应布局
bootstrap系列之响应式布局及相关的visible-sm、
响应式布局

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

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

2.使用方法：

外联样式

  通过<link>关键字导入css文件

内嵌样式

    通过 在.html 文件中借助<style></style>关键字设置

3.Bootstrap库

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

<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <!-- 外联-->
    <link rel="stylesheet" type="text/css" href="XXX.css" 
          media="only screen and (max-width:640px)">
    <!-- 内嵌-->
    <style>
        @media screen and (min-width:640px){
            body{
                background-color: light coral;
            }
        }
    </style>
</head>

.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;
    }
}