Nenhum produto encontrado nessa seleção.
Criar um layout responsivo não é tão complicado quando você tem em mente o que deseja. Por exemplo, no vídeo que você vai assistir nesse artigo, queria criar um layout com menu superior, conteúdo na esquerda, barra lateral na direita e um rodapé simples. Também gostaria que o conteúdo tivesse largura máxima de 1200px e que a barra lateral seguisse o fluxo do layout quando o usuário visualizasse o site utilizando um smartphone.
Então decidi tentar montar o layout correndo aqui, sem testar em nenhum navegador mais antigo nem me preocupar com cores, fundos, nem nada disso, somente a estrutura. Fiz isso para que você possa entender o processo da criação e o estilo que costumo começar um desenvolvimento. Normalmente eu crio a estrutura primeiro e depois trabalho o restante do layout.
Como resultado? Como você vai ver, ficou horrível, porém atingimos o objetivo de criar a estrutura de um layout responsivo. Agora só precisamos ajustar as cores (é óbvio), fontes e coisas do tipo. Não esquecendo de testar em outros navegadores para corrigir os bugs, por exemplo, o menu precisa de um "fix" para o IE6 e IE7 no menu. Também aconselharia verificar a largura mínima para o IE8, já que media queries não funcionam nele (ou utilizar algo que faça funcionar, como respond.js).
Assista ao vídeo abaixo.
Layout responsivo em 8 minutos
Obs.: Não é um problema no áudio, eu gravei sem microfone propositalmente para não demorar muito e focar completamente no código.
Só isso!
O código do vídeo
Se quiser copiar o código do vídeo, segue abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TutsUP - Layout Responsivo</title>
<style>
body, html{
margin:0;
padding:0;
}
.main{
max-width:1200px;
margin:0 auto;
overflow:hidden;
background:lightgray;
}
.content{
float:left;
width:100%;
margin-right:-210px;
}
.content-inner{
margin-right:210px;
}
.sidebar{
background:red;
float:right;
width:200px;
}
.menu{
width:100%;
background:blue;
}
.menu ul{
margin:0;
padding:0;
}
.menu ul li{
display:inline-block;
*display:inline;
zoom:1;
margin:0;
padding:0;
}
.menu ul li a{
display:block;
padding:20px;
color:#fff;
}
.footer{
width:100%;
background:yellow;
text-align:center;
}
@media screen and (max-width: 700px) {
.sidebar, .content-inner, .content{
float: none;
width: 100%;
margin-right:0;
}
}
</style>
</head>
<body>
<div class="main">
<div class="menu">
<ul>
<li> <a href="#"> menu </a> </li>
<li> <a href="#"> menu </a> </li>
</ul>
</div>
<div class="content">
<div class="content-inner">
Conteúdo
</div>
</div>
<div class="sidebar">
Barra lateral
</div>
<br style="clear:both">
<div class="footer">
Rodapé
</div>
</div>
</body>
</html>Provavelmente isso vai funcionar perfeitamente em todos os navegadores. Apenas media queries (como eu disse), precisam ser analisadas no IE6, 7 e 8.
