Midia Query - HTML5 - introdução

Tag mida Query




Muito importante- design responsivo, usa um css, e outro;

<div class="teste"> </div>

no css...

.teste{
width: 500px;
heigth: 600px;
}

//aplicando o conceito de midia
@midia only screen and(orientation:landscape) and  (max-width:500px ) {
     .teste {
                  background-color:green;
                   }
}

//comentarios explicativos
max-width:500px : tamanho maximo da tela for 500 px, backgrond ira ser verde.

orientation:landscape: quando o celular estiver deitado.