响应式布局简单代码

最新推荐文章于 2024-10-10 12:15:57 发布

原创最新推荐文章于 2024-10-10 12:15:57 发布 · 902 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{float:left;}
.class1{
min-height:200px;
background-color: lightblue;
}
.class2{
min-height:250px;
background-color: lightgreen;
}
.class3{
min-height:300px;
background-color: lightcoral;
}
@media screen and (min-width: 1200px){
.class1{width:30%;}
.class2{width:50%;}
.class3{width:20%;}
}
@media screen and (min-width: 900px) and (max-width: 1200px){
.class1{width:40%;}
.class2{width:60%;}
.class3{width:100%;}
}
@media screen and (min-width: 500px) and (max-width: 900px){
.class1{width:40%;}
.class2{width:60%;}
/*.class3{width:100%;}*/
}
@media screen and (max-width: 500px){
.class1,.class2,.class3{width:100%;}
}
</style>
</head>
<body>
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
</body>
</html>