所谓响应式布局就是针对不同分辨率的设备,可以呈现出不同的布局效果。如一个网站在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
2.浏览器可视窗口大于600px小于960px
3.浏览器可视窗口小于600px时
以上是不同浏览器宽度时所显示的效果。