<html>
<head>
<style type="text/css">
.test{
position:relative;
margin:auto;
/*
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
*/
}
.test .icon1{
position:absolute;
height:50px;
width:50px;
top:50px;
left:50px;
background-color:#fff;
}
.test .icon2{
position:absolute;
height:50px;
width:50px;
top:50px;
left:50px;
background-color:#fff;
}
@media (max-width: 320px) {
.test{
height:200px;
background-color:blue;
margin:10px;
}
}
@media (min-width: 401px) and (max-width: 640px) {
.test{
height:250px;
background-color:red;
margin:20px;
}
}
@media (min-width: 641px) and (max-width: 768px) {
.test{
height:300px;
background-color:gray;
margin:30px;
}
}
@media (min-width: 769px) and (max-width: 1200px) {
.test{
height:400px;
background-color:green;
margin:50px;
}
}
@media (min-width: 1201px) {
.test{
height:600px;
background-color:#000;
margin:100px;
}
.test .icon1{
position:relative;
height:50px;
width:100%;
top:0px;
left:0px;
background-color:yellow;
}
.test .icon2{
position:relative;
height:50px;
width:100%;
top:0px;
left:0px;
background-color:pink;
}
}
</style>
</head>
<body>
<div class='test'>
<div class='icon1'></div>
<div class='icon2'></div>
</div>
</body>
</html>
<div class='test'>
<div class='icon1'></div>
<div class='icon2'></div>
</div>
</body>
</html>