[CSS] Introdução aos modelos responsivos

"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:

Código:

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

Otimo tutorial, muito obrigado vou tentar estudar mais sobre o code

Até mais  [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]