Design responsivo com CSS3

<p>Melhor do que criar 2 vers&otilde;es de um site &eacute; fazer uma &uacute;nica vers&atilde;o que se adapte a qualquer dispositivo e tamanho de tela.&nbsp;O design responsive, ou "Responsive Web Design" faz isso automaticamente, ajustando a estrutura da p&aacute;gina para o tamanho de tela que sendo utilizada.</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9798/design-responsivo.jpg" alt="" /></span></p> <p>Nesse post vou mostrar como utilizar <em>@media</em> e <em>CSS3</em> para construir um layout responsivo. Tamb&eacute;m mostrarei como fazer funcionar no vil&atilde;o dos browsers, o Internet Explorer, atrav&eacute;s do uso da biblioteca Modernizr.</p> <p>Para o nosso exemplo usaremos os c&oacute;digos <em>HTML</em> e <em>CSS</em> abaixo.</p> <p><strong>HTML</strong><br /><code><div id="header"><br /><div id="logo">logo</div><br /><div id"nav">links</div><br /></div><br /><br /><div id="main"><br /><div id="article"></div><br /><div id="sidebar></div><br /></div><br /><br /><div id="footer">Footer<div></code><strong>&nbsp;</strong></p> <p><strong>CSS</strong><br /><code>*{margin:0px;padding:0px}<br />#header { padding:20px; overflow:auto; }<br />#main { padding:10px; }<br />#footer { padding:20px; clear:both }<br />#article, #sidebar { min-height:250px; margin-bottom:20px; overflow:auto}<br /></code>Agora que a estrutura base j&aacute; est&aacute; definida, vamos come&ccedil;ar a adicionar o conte&uacute;do da p&aacute;gina. Come&ccedil;aremos inserindo os links, fazendo o uso de listas. Usaremos a tag &lt;ul&gt;.</p> <p><span style="font-weight: bold;">HTML</span><br /><code><div id="nav"><br /><ul><br /><li>link</li><br /><li>link</li><br /><li>link</li><br />....<br />....<br /></ul><br /></div></code></p> <p>&nbsp;</p> <p><span style="font-weight: bold;">CSS</span><br /><code>ul { list-style:none; width:100% }<br />li { padding:4px; margin-bottom:5px; background-color:#ffffcc; text-align: center; color:#00000 }</code></p> <p>A partir de agora vamos come&ccedil;ar a tornar o layout da p&aacute;gina responsivo. Come&ccedil;aremos definindo o estilo de formata&ccedil;&atilde;o para resolu&ccedil;&otilde;es m&iacute;nimas de 768px.</p> <p><span style="font-weight: bold;">CSS (@media 768px)</span><br /><code>@media only screen and (min-width: 768px){<br /><br />#article { float:left; width:68%; }<br />#sidebar { float:right; width:30%; }<br />#logo { float:left; width:10%; }<br />#nav { float:right; width:80%; }<br /><br />}</code></p> <p>Agora vamos definir para resolu&ccedil;&otilde;es m&iacute;nimas de 1140px.</p> <p><span style="font-weight: bold;">CSS (@media 1140px)</span></p> <p><code>@media only screen and (min-width: 1140px) {<br /><br />#main { padding:20px 40px 20px 40px; }<br /><br />}</code></p> <p>E por fim, para resolu&ccedil;&otilde;es m&iacute;nimas de 480px.</p> <p><span style="font-weight: bold;">CSS (@media 480px)</span><br /><code>@media only screen and (min-width: 480px){<br /><br />ul { float:left; }<br />li { float:left; width:16%; padding:4px; margin-right:8px }<br /><br />}</code></p> <p>Com a codifica&ccedil;&atilde;o que temos at&eacute; o momento, conseguiremos algum &ecirc;xito, mas se abrirmos a p&aacute;gina no Internet Explorer vamos ver que n&atilde;o est&aacute; funcionando. Isso ocorre porque o Internet Explorer n&atilde;o est&aacute; pronto para utilizar CSS3 e HTML5.&nbsp;</p> <p>Para resolvermos esse problema n&oacute;s utilizaremos a biblioteca JavaScript Modernizr. Essa biblioteca verifica se o navegador &eacute; capaz de implementar a nova gera&ccedil;&atilde;o de tecnologias para produ&ccedil;&atilde;o das p&aacute;ginas responsivas. Essas novas tecnologias s&atilde;o o HTML5 e o CSS3.</p> <p>Para implementar a biblioteca Modernizr, temos que inclu&iacute;-la no cabe;calho da p&aacute;gina. Para isso fa&ccedil;a o download dela <a rel="nofollow" href="http://modernizr.com/" target="_blank"><strong>aqui</strong></a>.</p> <p>O c&oacute;digo HTML para a p&aacute;gina com a implementa&ccedil;&atilde;o da biblioteca &eacute; o seguinte:</p> <p><span style="font-weight: bold;">HTML</span></p> <p><code><!DOCTYPE html><br /><!--[if lt IE 7]><br /><html class="lt-ie7 lt-ie8 lt-ie9 no-js"><br /><![endif]--><br /><!--[if IE 7]><br /><html class="lt-ie8 lt-ie9 no-js"><br /><![endif]--><br /><!--[if IE 8]><br /><html class="lt-ie9 no-js"><br /><![endif]--><br /><!--[if gt IE 8]><!--><br /><html class="no-js"><br /><!--<![endif]--><br /><head><br /><title>DESIGN RESPONSIVO COM CSS3</title><br />//Meta tag para os devices<br /><meta name="viewport" content="width=device-width"><br /><link rel="stylesheet" href="style.css"><br /><script src="modernizr.min.js"></script><br /></head><br /><body><br /><br /><div id="header"><br />    <div id="logo">Logo</div><br />    <div id="nav"><br />        <ul><br />            <li>link</li><br />            <li>link</li><br />            <li>link</li><br />            <li>link</li><br />            <li>link</li><br />        </ul><br />    </div><br /></div><br /><br /><div id="main"><br />    <div id="article">Conteúdo</div><br />    <div id="sidebar">sidebar</div><br /></div><br /><br /><div id="footer"><br />    Footer<br /></div><br /><br /><body><br /></html></code></p> <p>Agora a p&aacute;gina funcionar&aacute; no Internet Explorer. Mas &eacute; importante observar o seguinte: MODERNIZR N&Atilde;O SUPORTA CSS EM LINHA.&nbsp;Veja a seguir o arquivo CSS completo desse tutorial.</p> <p><strong>CSS</strong></p> <p><code>*{margin:0px;padding:0px}<br />#header { padding:20px; overflow:auto; }<br />#main { padding:10px; }<br />#footer { padding:20px; clear:both }<br />#article,#sidebar { min-height:250px; margin-bottom:20px; overflow:auto }<br />ul { list-style:none; width:100% }<br />li { padding:4px; margin-bottom:5px; background-color:#ffffcc; text-align:center; color:#00000 }<br /><br />@media only screen and (min-width: 480px){<br /><br />    ul { float:left; }<br />    li { float:left; width:16%; padding:4px; margin-right:8px }<br /><br />}<br /><br />@media only screen and (min-width: 768px){<br /><br />    #article { float:left; width:68%; }<br />    #sidebar { float:right; width:30%; }<br />    #logo { float:left; width:10%; }<br />    #nav { float:right; width:80%; }<br /><br />}<br /><br />@media only screen and (min-width: 1140px) {<br /><br />    #main { padding:20px 40px 20px 40px; }<br /><br />}</code></p> <p>Para ver uma vers&atilde;o demo desse artigo, acesse <a title="Design responsivo com CSS3" rel="nofollow" href="http://migre.me/d5774">http://migre.me/d5774</a>.</p>