响应式布局一_viewport content=max-width=960px-CSDN博客

本文链接：https://blog.csdn.net/u010585448/article/details/51865505

所谓响应式布局就是针对不同分辨率的设备，可以呈现出不同的布局效果。如一个网站在PC上呈现一种布局效果，在pad上呈现的是一种布局效果，而在手机上所呈现的又是另一种布局效果。这种不同分别率设备上呈现不同效果的布局方式就是响应式布局。CSS3为响应式布局提供了良好的支持，下面通过一个简单的例子来简单学习一下如何利用CSS3实现响应式布局。

CSS3通过media query（媒体查询）对象来实现响应式布局的。通过media query对象可以获取当前设备的分辨率，然后根据不同的分辨率来设置不同的布局样式。

使用CSS3响应式布局，首先要在html文件中head内添加一个<meta name="viewport" content="width = device-width,initial-scale=1">，用来指明可视区域的宽度为设备宽度，按比例进行缩放。

布局文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>响应式布局</title>
    <link href="../static/CSS/response.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="heading"><h3>heading bar</h3></div>
    <div class="container">
        <div class="left"><h3>left bar</h3></div>
        <div class="main"><h3>main content</h3></div>
        <div class="right"><h3>right bar</h3></div>
    </div>
    <div class="footing"><h3>footing bar</h3></div>
</body>
</html>

样式文件

*{
    margin: 0;
    padding: 0;
    text-align: center;
}

.heading,.footing{
    background: aqua;
    margin: 10px auto;
    height: 80px;
}

.container{
    margin: 10px auto;
}

/*当屏幕宽度大于等于960时,container的左区域，主区域，右区域按左中右样式显示*/
@media screen and (min-width: 960px){
    .heading,.footing{
        width: 960px;
    }
    .container{
        width: 960px;
        height: 400px;
    }

    .left,.right{
        width: 180px;
        height: 400px;
        background: aqua;
        float: left;
    }
    .main{
        width: 590px;
        height: 400px;
        margin-right: 5px;
        margin-left: 5px;
        float: left;
        background: aqua;
    }
}

/*当屏幕宽度大于等于600px 小于960px时 隐藏right bar,调整各个部分的width*/
@media screen and (min-width: 600px) and (max-width: 960px){
        .heading,.footing{
            width: 600px;
        }
        .container{
            width: 600px;
            height: 400px;
        }
        .left{
            width: 150px;
            height: 400px;
            float: left;
            background: aqua;
        }
        .main{
            width:  440px;
            height: 400px;
            margin-left: 10px;
            float: left;
            background: aqua;
        }
        .right{
            display: none;
        }
}

/*当屏幕宽度小于600px ,各部分竖直方向上依次显示*/
@media screen and (max-width: 600px){
    .heading,.footing{
        width: 480px;
    }
    .container{
        width: 480px;
    }
    .left,.right{
        width: 480px;
        height: 120px;
        background: aqua;
    }
    .main{
        width: 480px;
        height: 400px;
        margin-top: 10px;
        margin-bottom: 10px;
        background: aqua;
    }
}

在样式文件中，分别用三个@media screen指明当宽度大于960px时布局样式，大于600px并且小于960px的布局样式，宽度小于600px时的布局。可以运行以上代码，然后缩放浏览器，就可以看到不同的布局效果。

1.浏览器可视窗口大于960px