De telas de smartphones a grandes desktops, as páginas responsivas formatam o conteúdo de acordo com o tamanho da janela de visualização.
Isso é feito por meio de consultas de mídia (introduzidas com CSS3) – consultar um estilo diferente quando uma certa largura da tela foi atingida.
Existem duas maneiras de usá-lo:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px") href="smalldevice.css" />outro método é incluir as condições em sua folha de estilo:
body { background: #333; }
@media only screen and (max-device-width:480px) {
body { background: #FFF; }
}no exemplo acima, a cor de fundo da página será um tom escuro de cinza ao visualizar em tamanhos de tela maiores que 480px. Por outro lado, o fundo será branco quando visualizado em dispositivos pequenos, como telefones com tamanhos de tela de 480px e abaixo.
Com eles, agora é possível criar vários layouts para uma página e conteúdo dependendo da condição que você passar.
_
Verifique as especificações em http://www.w3.org/TR/css3-mediaqueries/