media queries

"Design Responsivo" é uma técnica que faz com que sua página "responda" para o navegador e dispositivo no qual o conteúdo é exibido... para parecer incrível não importe como.

Media Queries são as ferramentas mais poderosas para fazer isso. Vamos usar nosso layout que possui larguras baseadas em percentagens e fazê-lo exibir uma única coluna quando o navegador for muito pequeno, permitindo que o menu caiba na 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 você redimensionar seu navegador fica muito bacana!

</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>

Pronto! Agora nosso layout está ótimo até em navegadores de dispositivos móveis. Aqui estão alguns sites populares que utilizam media queries dessa forma. Há muito mais que você pode detectar além de min-width e max-width: consulte a documentação da MDN para aprender mais.

bônus

Você pode fazer seu layout ficar melhor ainda em dispositivos móveis utilizando a meta tag: viewport.

  • Creative Commons License