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 Jonathan Lamim | @jonathanlamimkt em 07/02/2013 08:27 em Programação

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. <img src="https://www.oficinadanet.com.br/imagens/post/9798/design-responsivo.jpg" alt="" /> 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 <code><div id="header"> <div id="logo">logo</div> <div id"nav">links</div> </div> <div id="main"> <div id="article"></div> <div id="sidebar></div> </div> <div id="footer">Footer<div></code>  CSS <code>*{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} </code>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 <code><div id="nav"> <ul> <li>link</li> <li>link</li> <li>link</li> .... .... </ul> </div></code>   CSS <code>ul { list-style:none; width:100% } li { padding:4px; margin-bottom:5px; background-color:#ffffcc; text-align: center; color:#00000 }</code> 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) <code>@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%; } }</code> Agora vamos definir para resoluções mínimas de 1140px. CSS (@media 1140px) <code>@media only screen and (min-width: 1140px) { #main { padding:20px 40px 20px 40px; } }</code> E por fim, para resoluções mínimas de 480px. CSS (@media 480px) <code>@media only screen and (min-width: 480px){ ul { float:left; } li { float:left; width:16%; padding:4px; margin-right:8px } }</code> 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 <a rel="nofollow" href="http://modernizr.com/" target="_blank">aqui</a>. O código HTML para a página com a implementação da biblioteca é o seguinte: HTML <code><!DOCTYPE html>     <html class="no-js">  <head> <title>DESIGN RESPONSIVO COM CSS3</title> //Meta tag para os devices <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <script src="modernizr.min.js"></script> </head> <body> <div id="header"> <div id="logo">Logo</div> <div id="nav"> <ul> <li>link</li> <li>link</li> <li>link</li> <li>link</li> <li>link</li> </ul> </div> </div> <div id="main"> <div id="article">Conteúdo</div> <div id="sidebar">sidebar</div> </div> <div id="footer"> Footer </div> <body> </html></code> 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 <code>*{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; } }</code> Para ver uma versão demo desse artigo, acesse <a title="Design responsivo com CSS3" rel="nofollow" href="http://migre.me/d5774">http://migre.me/d5774</a>.

Mais sobre: css, css3, html

Share Tweet

DESTAQUES