<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
height: 100px;
margin: 0 auto;
}
@media screen and (max-width:767px){
.container{
width: 100%;
background-color: pink;
}
}
@media screen and (min-width:767px){
.container{
width: 750px;
background-color: gray;
}
}
@media screen and (min-width:992px){
.container{
width: 970px;
background-color: aqua;
}
}
@media screen and (min-width:1200px){
.container{
width: 1170px;
background-color: red;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
媒体查询代码
最新推荐文章于 2024-07-25 15:47:15 发布