![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Acompanhe nossa série de posts sobre Layouts Responsivos:
Agora que já sabemos o que são Media Types e Media Queries podemos avançar com nossos estudos.
Muitas pessoas confundem layouts responsivos com layouts fluidos (ou líquidos), hoje vamos ver a diferença deles.
Layouts Responsivos e Fluidos:
Para ter sucesso com layouts responsivos você deve as vezes deixar de lado o uso de médicas exatas (px) e aplicar medidas relativas (%).
Entretanto não iremos o tempo todo utilizar medidas em porcentagem, pois utilizar apenas isso iria criar um layout do tipo fluido.
Layouts fluidos são bem diferentes de responsivos, pois o Fluido (como o nome diz) flui com o tamanho da tela do usuário, enquanto o Responsivo responde ao tamanho.
Os exemplos a seguir ilustram bem o que estou dizendo.
Layout Fluido:
Veja que caso o usuário tenha a tela muito grande o texto ficará praticamente em apenas uma linha e quando diminuímos a tela o texto fica totalmente espremido na sidebar.
Código fonte:
Layout Fluido Híbrido:
No Fluido Híbrido determinamos no css max-width (largura máxima) e min-width (largura mínima), desta forma não temos mais problemas com resoluções muito grandes ou pequenas, pois estaremos determinando uma medida de segurança para apresentar corretamente o layout.
Para demonstrar como funciona o Fluido Híbrido apliquei max-width de 960px e min-width de 600px:
Codigo Fonte:
É importante saber que min-width e max-width não funcionam corretamente no IE6 e IE7. Porém é possível determinar uma largura fixa para estes navegadores utilizando comentários condicionais do Internet Explorer.
Aqui um exemplo básico destes comentários:
Layouts Responsivos:
Para ilustrar o funcionamento do responsivo criei 3 estados diferentes para o nosso layout.
- Monitores com resolução de 1024px de largura ou superior e Internet Explorer 8 e inferior
Foi declarado uma largura absoluta de 960 px para o corpo do site. - Largura igual ou inferir a 900px
Aqui declaramos que existem apenas larguras relativas de 100% - Largura igual ou inferir a 400px
Ocultamos a sidebar do lado esquerdo (apenas para ilustrar o exemplo)
Neste exemplo podemos ver claramente como o efeito cascata do CSS funciona corretamente com o Media Queries, desta forma o CSS que fizemos como padrão é mantido normalmente por todo o documento, sendo alterado apenas quando declaramos alguma modificação com o Media Queries.
Note também que o css declarado para a largura de janela de 900px é mantido para o de 400px.
Código Fonte:
Vale lembrar que estamos utilizando CSS3 (Media Queries) para deixar o layout responsivo. Desta forma no Internet Explorer 8 (e inferiores) não serão detectados os outros estados de nosso CSS.
Entretanto, a ideia de um layout responsivo é que ele funcione corretamente em browsers mobiles.
Além da possibilidade de utilizar comentários condicionais para adaptação no Internet Explorer.
Download dos exemplos:
Faça download de todos os exemplos.
Aguardem por novos posts desta serie durante esta semana.
Fontes:
- About Conditional Comments (em inglês)
- Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? (em inglês)
Muito bom o artigo! Particulamente, eu utilizo uma base nos meus sites (determino os px) e dentro desta base, utilizo % na maioria das divs, fica um resultado bacana.
Nós desenvolvedores, temos que cada vez mais fazer com que os usuários atualizem seus browsers e larguem o IE 8 e anteriores. Isso atrapalha e impede a evolução.
Ótimas diacs, mas…
Leio, releio, mas não consigo aplicar isso em meu blog.
Alguma dica a mais?
Calma que vou ensinar passo a passo como fazer isso.
Estou ensinando algumas teorias e fundamentos antes de chegar a colocar realmente a mão na massa.
Aaah rs Pensei que os exemplos eram para nos basearmos para fazermos no nosso!
Perfeito então.
Obrigada.
É que antes de chegar e falar “faz isso e pronto!”, estou explicando conceitos básicos, para todos entenderem como funciona.
Estou hoje fazemos um site aqui em HTML, que vou disponibilizar para download e todos irão utilizar ele e fazer o que vou ensinar nos próximos posts.
Falta apenas mais um post sobre conceitos e depois no quarto post desta serie vou disponibilizar este HTML que estou falando.
Compreendi!
Poxa perfeito!
Parabéns pelos artigos. Todos são de ótima qualidade!
estarei acompanhando todos…
Olá Claudio!
Muitos bom as suas séries sobre layouts responsivos. Vou acompanhar todas!
Me diz uma coisa, estou testando uma template responsivo no WP, mas quando adiciono uma imagem no artigo, ela não diminuí junto com o layout. Fui nas configurações avançadas da imagem e alterei o tamanho da largura e altura para 100%. Funcionou em todos os browsers mas no Safari a imagem fica esticada. É assim mesmo que devo fazer?
Abraço!
Exclente série de artigos. Obrigado por compartilhar essas informações com todos! Sem dúvida irei acompanhar os próximos. Aguardando \o
Kd a terceira aula????
Emerson,
Vou solicitar ao Claudio Sanches que dê continuidade ao tema desse artigo para aprofundar ainda mais isso.
O Claudio falou que seria uma série bem extensa e detalhada. Mais por enquanto vamos caminhando com mais pesquisas e leituras.
Valeu Claudio.
Poxa, que triste isso, não tem uma continuação 🙁 Precisa tanto de um help.
Olá Claudio,
Parabéns pelo post, muito útil. Exclareceu várias dúvidas.
Obrigado por compartilhar
Gostei muito espero que haja continuidade.
Valeu Claudio! Ficou bem clara a diferença entre fluido e responsivo
Oi, Claudio!
Não teve mais posts dessa serie? Dei uma procurada aqui no FB, mas não encontrei a continuação…
Logo quando achei que minha vida estaria salva, com explicações conceituais decentes sobre como construir um layout responsivo… O tema pra mim é novidade e não encontro em lugar nenhum conteúdo didático que me agrade além de artigos de opinião que se divdem entre exaltar e jogar pedras no princípio do desig responsivo..