响应式布局简单理解就是为了适应不同尺寸屏幕,其核心技术为css的mediaMedia(媒体查询器)的用法。
步骤
1.定义meta标签,主要意思是来兼容移动设备的效果
<meta name="view" content="width = device-width,initial-sacle=1">
参数解释:
width = device-width:宽度等于当前设备的宽度
initial-sacle=1:初始的缩放比例为1(默认是1)
2.写div标签
<body>
<div class="heading"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footing"></div>
</body>
3.定义新的css文件,导入css文件
<link href="style.css" type="text/css" rel="stylesheet">
以下为设置初始样式
*{
margin: 0px;
padding: 0px;
}
.heading,.container,.footing{
margin: 10px auto;
}
.heading{
height: 100px;
background-color: cadetblue;
}
.left,.right,.main{
background-color: red;
}
.footing{
height: 100px;
background-color: blue;
}
设置宽度大于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-left: 5px;
margin-right: 5px;
width: 550px;
}
.container{
height: 500px;
}
}
设置处于600px-900px之间的页面布局
@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: 400px;
}
}
打开浏览器进行缩放,当页面宽度大于960px时我布局如下:
处于600-960之间的布局
宽度小于600px的布局
注意的点:
@media screen and (min-width: 600px) and (max-width:960px)引入这个的时候记得括号前后都要空格,不然发现没效果