12 ago

Design Responsivo em 3 passos

Categoria: - Comentários (38)

Seguindo com a série de artigos sobre Design Responsivo, agora que você já aprendeu o que é, conheceu as CSS3 Media Queries, vamos aprender a criar um layout responsivo básico em 3 passos.

- Passo 1: A meta tag “viewport”
- Passo 2: A estrutura HTML
- Passo 3: As media queries

Veja o demo.

A meta tag “viewport”

O viewport é a área onde o seu website aparece. A meta tag viewport pode ser usada para controlar como o conteúdo HTML irá aparecer nos dispositivos móveis e também serve para controlar o zoom.

A maioria dos navegadores de celular dimensionam as páginas HTML para a largura do viewport, fazendo assim com que se encaixem proporcionalmente à tela. Usando a meta tag viewport você consegue redefinir isso.

A meta tag viewport, abaixo diz ao navegador para usar como largura do layout, a largura do viewport, desativando a escala inicial. Vamos incluir este código dentro da tag <header> do nosso site.

A estrutura HTML

Em nosso exemplo, nós podemos ver um layout de página básico, com cabeçalho, conteúdo, barra lateral e rodapé. O cabeçalho tem uma altura fixa de 180px, o conteúdo tem uma largura de 600px, a barra lateral tem 300px de largura.

Responsive Layout Básico

Responsive Layout Básico (clique na imagem para ampliar)

As media queries

Aqui é onde a mágica acontece. As media queries são uma forma de enviar condições ao navegador para informá-lo como renderizar a página, dependendo do tamanho do viewport.

O conjunto de regras abaixo, irão funcionar quando a largura do viewport for 980px ou inferior. Basicamente vamos passar a largura da <div> “content” de pixels para porcentagem, transformando a largura do elemento em fluída.

Agora, se o viewport for 700px ou inferior, nós vamos especificar um tamanho automático para as <div>s “content” e “sidebar” e remover os floats. Assim os elementos vão ocupar 100% da tela.

Por fim, se o viewport for 480px ou inferior (tela de celular), vamos redefinir a altura da <div> “header” deixando-a automática, mudar o tamanho da tag <h1> para 24px e esconder a <div> “sidebar”.

Você pode escrever quantas media queries quiser. Neste artigo nós criamos códigos para apenas 3 principais tamanhos: desktops, tablets e celulares.

O propósito das media queries é aplicar estilos diferentes, de acordo com o tamanho do viewport do dispositivo. Você pode criar estes estilos em um único arquivo CSS ou em arquivos separados.

Nota sobre o Internet Explorer

O Internet Explorer 8 e anteriores não suportam media queries. Você pode usar css3-mediaqueries.js ou respond.js para adicionar suporte à media queries quando o seu site for acessado através do Internet Explorer cuja versão for 8 ou inferior.

Este foi mais um artigo relacionado ao Design Responsivo. Se você gostou, compartilhe com o mundo! E como de costume, qualquer dúvida, basta enviar um comentário. Até a próxima pessoal! :-)

Este artigo é uma adaptação do artigo original em http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Comentários ( 38 )

  • Klaus

    Ja agradecendo ai pelo post, obg!

  • Bom dia estou estudando sobre responsivo, fico grato

  • Ótimo tutorial. Funcionou perfeitamente no meu site. E olhe que entendo muito de CSS, devido a prática, mas nunca tinha trabalhado com Media Queries. Parabéns pela explicação didática.

  • Show, muito bom mesmo.
    Ajudou aqui mai Brodi
    Abs

Envie seu comentário

Resize-me!