响应式布局实例3
2019年09月20日
1026
响应式布局实例3
指定它的宽度 为当前设备的宽度
width=device-width
指定它的缩放，按原比例进行缩放
initial-scale=1
页面划分3个部分：
头部，中间部分（承载内容的部分），脚部
中间部分指定3个部分：
左部分，中间部分（主框架），右部分（右菜单）
标签构成：
<div class="header"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footer"></div>
通过媒体查询设置不同的断点，为不同的视图宽度指定不同的css规则，让浏览器根据指定的视图宽度渲染页面，来实现响应式布局。
可以根据需要，添加任意多个媒体查询断点，例如，希望在视口宽度小于等于980px时，将body背景设置为红色显示。
CSS中的媒体查询，设置断点。
htmlcss：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
/*初始化设置*/
*{
margin: 0;
padding: 0;
}
.header,.container,.footer{
margin: 10px auto;
}
.header{
height: 100px;
background-color:chocolate;
}
.left,.main,.right{
background-color: cornflowerblue;
}
.footer{
height: 100px;
background-color: aquamarine;
}
/*适用不同分辨率的*/
/*指定屏幕 再指定它的最小宽度是960像素(不小于960像素)*/
@media screen and (min-width: 960px) {
/*在960这个区域，设置如下：*/
.header,.container,.footer{
width: 960px;
}
/*设置中间的div有浮动效果*/
.left,.main,.right{
/*向左浮动*/
float: left;
height: 500px;
}
/*指定每个元素的宽度*/
.left,.right{
width: 200px;
}
.main{
/*左右能看出来*/
margin-left:5px;
margin-right: 5px;
width: 550px;
}
/*主容器*/
.container{
height: 500px;
}
}
/*小于960的时候，指定一个效果
它的最小宽度是600像素
它在600到960的时候，它又是一个新的效果
* */
@media screen and (min-width: 600px) and (max-width: 960px) {
.header,.container,.footer{
width: 600px;
}
.left,.main{
float: left;
height: 400px;
}
/*右半部分不设置，想办法把它隐藏掉*/
.right{
display: none;
}
/*设置单独的left*/
.left{
width: 160px;
}
/*设置单独的main*/
.main{
width: 435px;
/*让main和left之间的距离是5像素*/
margin-left: 5px;
}
.container{
height: 400px;
}
}
/*小于600,让盒子按照从上到下,一排一排显示*/
@media screen and (max-width:600px){
.header,.container,.footer{
width: 400px;
}
.left,.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 10px;
width: 400px;
height: 200px;
}
.right{
margin-top: 10px;
}
.container{
height: 420px;
}
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>