Design responsivo com CSS3

 

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










//Meta tag para os devices








   

Conteúdo

   

sidebar

   Footer

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.