definição
Usando a consulta @media, você pode definir diferentes estilos para diferentes tipos de mídia.
@media pode definir estilos diferentes para tamanhos de tela diferentes , especialmente se você precisar criar uma página responsiva, @media é muito útil.
Quando você redefine o tamanho do navegador, a página será renderizada novamente de acordo com a largura e a altura do navegador.
usar
Se você precisar avaliar a largura e a altura ao mesmo tempo , poderá usar o operador e .
O código a seguir avalia que a altura é menor que 500 px e a largura é maior que 600 px
@media screen and (max-height: 500px) and (min-width:600px){
.toc{
display:none
}
header, main {
margin-left: 2em;
margin-bottom: 3em;
}
}