Como Tornar Seu Layout Responsivo

Você sabia que é possível tornar o layout de uma página responsivo (adaptável para diversos tamanhos de tela) através da técnica de Media Query a partir do CSS3?

Tudo que você precisa fazer é usar a regra @media e especificar uma condição (largura da tela, por exemplo) para que o bloco de código CSS equivalente seja aplicado.

Exemplo de Media Query no CSS3

[code] @media only screen and (max-width: 500px) {
body {
background-color: grey;
}
}
[/code]