css响应式举例

最新推荐文章于 2022-08-08 20:40:31 发布

看谁头发多

最新推荐文章于 2022-08-08 20:40:31 发布

阅读量195

点赞数

html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width = device-width,initial-scale=1" />
<title>Title</title>
<link type="text/css" rel="stylesheet" href="dxtxstyle.css">
</head>
<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>
</html>

css：
*{
margin:0px;
padding: 0px;
}
.heading,
.container,
.footing{
margin: 10px auto;
}

.heading{
height: 100px;
background-color: red;
}
.left,
.right,
.main{
height: 300px;
background-color: yellow;
}
.footing{
height: 100px;
background-color: gray;
}
/*media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表*/
@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;
}
}
@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;
}
}

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