Media Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<style>
.box{
font-size: 35px;
text-align: center;
background-color: rgb(252, 10, 10);
color: rgb(255, 255, 255);
display: none;
}
@media only screen and (max-width:300px){
#box-1{
display: block;
background-color: rgb(255, 0, 0);
}
}
@media only screen and (min-width:300px) and (max-width:500px){
#box-2{
display: block;
background-color: black;
}
}
@media only screen and (min-width:500px) and (max-width:800px){
#box-3{
display: block;
color: black;
background-color: rgb(255, 209, 5);
}
}
@media only screen and (min-width:800px){
#box-4{
display: block;
background-color: rgb(10, 66, 8);
}
}
</style>
</head>
<body>
<div class="box" id="box-1">I am iphone</div>
<div class="box" id="box-2">I am tablet</div>
<div class="box" id="box-3">I am computer</div>
<div class="box" id="box-4">I am wide screen computer</div>
</body>
</html>
Comments
Post a Comment