Tudo sobre Layout Responsivo #02: Diferenças entre Layout Responsivo e Fluido

Siga o Blog no Facebook e no Twitter

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.

  1. 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.
  2. Largura igual ou inferir a 900px
    Aqui declaramos que existem apenas larguras relativas de 100%
  3. 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:

FBlogHost - Hospede seu Blog

14 Comentários

  1. 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.

    Responder

        • É 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.

          Responder

  2. 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!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.