<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mediaquery</title>
</head>
<style>
.box{
font-size: 50px;
border: 2px solid black;
background-color: red;
color: white;
text-align: center;
display: none;
}
@media (max-width: 300px){
#box-1{display: block;
background-color:green;
}
}
@media (min-width: 300px ) and (max-width: 500px){
#box-2{display: block;
background-color:red;
}
}
@media (min-width: 500px) and (max-width: 900px){
#box-3{display: block;
background-color:yellow;
}
}
@media (min-width: 900px ){
#box-4{display: block;
background-color:blue;
}
}
</style>
<body>
<div class="box" id="box-1">Main ek Iphone hoon</div>
<div class="box" id="box-2">Main ek Tablet hoon</div>
<div class="box" id="box-3">Main ek Laptop hoon</div>
<div class="box" id="box-4">Main ek Widescreen hoon</div>
</body>
</html>
No comments:
Post a Comment