TOPO

PRINCIPAL

Esta página é interativa e destina-se a demonstrar as funcionalidades previstas nas especificações CSS3 para Media Queries.
Redimensione a janela do seu navegador em movimentos horizontais de modo a obter largura mínima e máxima. Observe a mudança dinâmica de layout para 3, 2 e 1 coluna dependendo da resolução (largura do navegador).

O layout se acomoda ao tamanho da janela sem necessidade de alterar a marcação HTML.

Examine o código fonte da página (as regras CSS estão incorporadas ao documento) para mais detalhes.

A finalidade desta página é somente demonstrar o funcionamento de Media Queries

Nota: Usamos o script css3-mediaqueries.js nesta página. Assim ela funciona nos IE8 e anteriores que não suportam nativamente Media Queries. Usamos também, propositadamente, múltiplos backgrounds para a técnica faux-columns nos layouts de 2 e 3 colunas, mas como múltiplos backgrounds não funcionam nos IE8 e anteriores as colunas NAV e AUX não têm sua cor estendida até o rodapé como acontece no Firefox.

AUX

Lorem ipsum dolor sit amet.

RODAPÉ