<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<style type="text/css">
@media (min-height:786px)
{
.box1 {
height: 300px;
background-color: green;
}
.box2 {
height: 300px;
background-color: red;
}
.box3 {
height: 300px;
background-color: blue;
}
}
@media (max-height:1200px)
{
.box1 {
height: 300px;
background-color: #122B40;
}
.box2 {
height: 300px;
background-color: #101010;
}
.box3 {
height: 300px;
background-color: #008000;
}
}
</style>
</head>
<body>
<div>
<div class="box1 col-xs-4 box1 col-md-5.5 box1 col-lg-1"></div>
<div class="box2 col-xs-4 box2 col-md-1 box2 col-lg-10"></div>
<div class="box3 col-xs-4 box3 col-md-5.5 box3 col-lg-1"></div>
</div>
</body>
</html>
2022/3/3响应式作业
最新推荐文章于 2024-07-24 21:06:03 发布