Design responsivo com CSS3

Melhor do que criar 2 versões de um site é fazer uma única versão que se adapte a qualquer dispositivo e tamanho de tela. O design responsivo, ou "Responsive Web Design" faz isso automaticamente, ajustando a estrutura da página para o tamanho da tela que está sendo utilizada.

Por Programação Pular para comentários
Design responsivo com CSS3

Melhor do que criar 2 versões de um site é fazer uma única versão que se adapte a qualquer dispositivo e tamanho de tela. O design responsive, ou "Responsive Web Design" faz isso automaticamente, ajustando a estrutura da página para o tamanho de tela que sendo utilizada.

Design responsivo com CSS3

Nesse post vou mostrar como utilizar @media e CSS3 para construir um layout responsivo. Também mostrarei como fazer funcionar no vilão dos browsers, o Internet Explorer, através do uso da biblioteca Modernizr.

Para o nosso exemplo usaremos os códigos HTML e CSS abaixo.

HTML





Footer
 

CSS
*{margin:0px;padding:0px}
#header { padding:20px; overflow:auto; }
#main { padding:10px; }
#footer { padding:20px; clear:both }
#article, #sidebar { min-height:250px; margin-bottom:20px; overflow:auto}
Agora que a estrutura base já está definida, vamos começar a adicionar o conteúdo da página. Começaremos inserindo os links, fazendo o uso de listas. Usaremos a tag <ul>.

HTML

 

CSS
ul { list-style:none; width:100% }
li { padding:4px; margin-bottom:5px; background-color:#ffffcc; text-align: center; color:#00000 }

A partir de agora vamos começar a tornar o layout da página responsivo. Começaremos definindo o estilo de formatação para resoluções mínimas de 768px.

CSS (@media 768px)
@media only screen and (min-width: 768px){

#article { float:left; width:68%; }
#sidebar { float:right; width:30%; }
#logo { float:left; width:10%; }
#nav { float:right; width:80%; }

}

Agora vamos definir para resoluções mínimas de 1140px.

CSS (@media 1140px)

@media only screen and (min-width: 1140px) {

#main { padding:20px 40px 20px 40px; }

}

E por fim, para resoluções mínimas de 480px.

CSS (@media 480px)
@media only screen and (min-width: 480px){

ul { float:left; }
li { float:left; width:16%; padding:4px; margin-right:8px }

}

Com a codificação que temos até o momento, conseguiremos algum êxito, mas se abrirmos a página no Internet Explorer vamos ver que não está funcionando. Isso ocorre porque o Internet Explorer não está pronto para utilizar CSS3 e HTML5. 

Para resolvermos esse problema nós utilizaremos a biblioteca JavaScript Modernizr. Essa biblioteca verifica se o navegador é capaz de implementar a nova geração de tecnologias para produção das páginas responsivas. Essas novas tecnologias são o HTML5 e o CSS3.

Para implementar a biblioteca Modernizr, temos que incluí-la no cabe;calho da página. Para isso faça o download dela aqui.

O código HTML para a página com a implementação da biblioteca é o seguinte:

HTML









DESIGN RESPONSIVO COM CSS3
//Meta tag para os devices









   
Conteúdo

   





Agora a página funcionará no Internet Explorer. Mas é importante observar o seguinte: MODERNIZR NÃO SUPORTA CSS EM LINHA. Veja a seguir o arquivo CSS completo desse tutorial.

CSS

*{margin:0px;padding:0px}
#header { padding:20px; overflow:auto; }
#main { padding:10px; }
#footer { padding:20px; clear:both }
#article,#sidebar { min-height:250px; margin-bottom:20px; overflow:auto }
ul { list-style:none; width:100% }
li { padding:4px; margin-bottom:5px; background-color:#ffffcc; text-align:center; color:#00000 }

@media only screen and (min-width: 480px){

    ul { float:left; }
    li { float:left; width:16%; padding:4px; margin-right:8px }

}

@media only screen and (min-width: 768px){

    #article { float:left; width:68%; }
    #sidebar { float:right; width:30%; }
    #logo { float:left; width:10%; }
    #nav { float:right; width:80%; }

}

@media only screen and (min-width: 1140px) {

    #main { padding:20px 40px 20px 40px; }

}

Para ver uma versão demo desse artigo, acesse http://migre.me/d5774.

Comentários:
Carregar comentários