media queries

"Responsive Design" é a estratégia de fazer um site que "responde" ao browser e dispositivo onde está a ser apresentado... mostrando-se de forma sempre expectacular.

Media queries é a ferramenta mais potente para fazer isto. Vamos pegar no nosso layout que utiliza percentagens de largura e mostra-lo em uma coluna quando o browser é demasiado pequeno para ter o menu numa barra lateral: 

@media (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media (max-width:599px) {
  nav li {
    display: inline;
  }
}
<div class="container">
<section>

Agora quando redimensionas o teu browser é ainda mais fixe que nunca!

</section>
<section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>

Tada! Agora o nosso layout parece bom mesmo num browser móvel. Aqui ficam alguns sites populares que utilizam media queries desta maneira. Existe muito mais que consegues detectar do que min-width e max-width: verifica a documentação MDN para aprender mais.

crédito extra

Podes fazer o teu layout parecer ainda melhor no móvel utilizando meta viewport.

  • Creative Commons License