CSS_Media_Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
</head>
<style>
.box {
padding: 25px;
text-align: center;
background-color: aquamarine;
margin: 5px 25%;
font-size: xx-large;
display:none;
}
@media only screen and (max-width: 500px) {
#box1 {
display: block;
}
}
@media only screen and (min-width: 500px) and (max-width: 700px) {
#box2 {
display: block;
color: yellow;
background-color: blueviolet;
}
}
@media only screen and (min-width: 700px) and (max-width: 1000px) {
#box3 {
display: block;
color: azure;
background-color: cyan;
}
}
@media only screen and (min-width: 1000px) and (max-width: 1300px) {
#box4 {
display: block;
color: azure;
background-color: pink;
}
}
@media only screen and (min-width: 1300px) {
#box5 {
display: block;
color: azure;
background-color: steelblue;
}
}
</style>
<body>
<div class="box" id="box1">I have a Oppo Mobile</div>
<div class="box" id="box2">I have a Vivo Mobile</div>
<div class="box" id="box3">I have a Samsung Mobile</div>
<div class="box" id="box4">I have a Infinix Mobile</div>
<div class="box" id="box5">I have a Iphone Mobile</div>
</body>
</html>
No comments:
Post a Comment