<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query</title>
<style>
div{
font-size: 40px;
margin: 20px;
padding: 20px;
background-color: coral;
border: solid 5px;
display: none;
}
@media (max-width: 600px){/*largura no máximo 600*/
/*Se a largura for no máximo 600 px, irá aplicar na classe muito...*/
.muito-pequeno{display: block;}
}
/* orientação retrato, se a largura for no maior 100*/
@media (max-width: 1000px), (orientation: landscape){/*orientation: landscape*/
.pequeno-retrato{display: block;}
}
/* so vai aparecer se tiver largura minima de 500px */
@media (min-width: 500px) and (max-width: 1000px){
.intervalo {display: block;}
}
</style>
</head>
<body>
<div class="muito-pequeno">Muito Pequeno</div>
<div class="pequeno-retrato">Pequeno ou Retrato</div>
<div class="intervalo">Intervalo</div>
</body>
</html>
Nenhum comentário:
Postar um comentário