<p>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.</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ém mostrarei como fazer funcionar no vilão dos browsers, o Internet Explorer, através do uso da biblioteca Modernizr.</p>
<p>Para o nosso exemplo usaremos os có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> </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á 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>.</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> </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çar a tornar o layout da página responsivo. Começaremos definindo o estilo de formatação para resoluções mí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ções mí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ções mí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çã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. </p>
<p>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.</p>
<p>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"><strong>aqui</strong></a>.</p>
<p>O código HTML para a página com a implementação da biblioteca é 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á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.</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ão demo desse artigo, acesse <a title="Design responsivo com CSS3" rel="nofollow" href="http://migre.me/d5774">http://migre.me/d5774</a>.</p>
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.
Comentários
Carregar comentários
