Design Responsivo com CSS3 Media Queries | wpmidia lab
Dando continuidade aos artigos sobre "Design Responsivo", hoje nós vamos começar a aprofundar ainda mais os nossos conhecimentos sobre esta técnica.
Anteriormente eu fiz uma pequena introdução ao assunto. Se você não leu, pode ler agora em http://wpmidia.com.br/desenvolvimento-web/iniciando-web-design-responsivo/. Neste post, eu falei sobre o que é Design Responsivo e passei alguns links de recursos interessantes para serem usados nesta técnica.
Abra a demonstração e redimensione o seu navegador para ver as Media Queries em ação.
@media screen and (min-width: 900px) { .class { background: #666; } }
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } }
@media screen and (max-device-width: 480px) { .class { background: #000; } }
1. Três colunas e barra lateral
2. Duas colunas e barra lateral (a coluna do meio cai para a coluna da esquerda)
3. Uma coluna lateral (a coluna da direita desloca-se para baixo do logotipo)
4. Sem barra lateral (o logo e a coluna da direita deslocam-se para cima e as colunas da barra lateral e outras, movem-se para abaixo)
Hicksdesign – http://hicksdesign.co.uk/ (clique na imagem para ampliar)
O layout deste site muda de uma coluna, duas colunas e quatro colunas, dependendo do tamanho da área de visão do seu navegador.
Colly – http://colly.com/ (clique na imagem para ampliar)
1. Navegação no topo, 1 fileira de imagens
2. Navegação no lado esquerdo, 3 colunas de imagens
3. Navegação no topo, nenhuma imagem de fundo no logotipo, 3 colunas de fotos
A List Apart – http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (clique na imagem para ampliar)
Este site é similar ao exemplo do site Colly, mas a diferença está nas imagens. No Tee Gallery, as imagens são redimensionadas junto com o layout. O truque é usar porcentagem ao invés de pixel fixo (width=100%).
#gallery article img { display: block; width: 100%; }
#gallery article img {
Tee Gallery – http://teegallery.com/ (clique na imagem para ampliar)
Há muito que se falar a respeito do Design Responsivo, por isso, em breve eu estarei publicando mais conteúdo sobre esta técnica muito útil nos dias de hoje.
Se gostaram do artigo, curtam e compartilhem!!! E, como sempre, qualquer dúvida, basta enviar um comentário.
Este artigo é uma adaptação/tradução do artigo original em http://webdesignerwall.com/tutorials/css3-media-queries
Tags: css3 Design Responsivo media queries mobile
Boa tarde amigo, tenho uma dúvida
Se existe, qual seria? (Além do modo de escrever)
O primeiro código vai funcionar para qualquer midia (incluindo "print") e o segundo somente para desktop e mobile…
não me refiro a monitor e sim a smartphones e tablets.
imagine em um outro exemplo que eu declaro um valor máximo de 480px e o camarada acessa com um smartphone de 640px(exemplo) o que vai acontecer?
Você precisa ter um código que se ajuste aos principais breakpoints.
Se deixar o tamanho menor, quando ele for acessado num dispositivo maior (entenda o que eu quis dizer no meu comentário antigo como "monitor"), vai haver uma sobra nas laterais, apenas isso.
veja bem, o iphone 5 tem 4 polegadas e tem uma resolução de: 640 x 1136 pixel
vc não vai ter a mesma experiência de um desktop em um smartphone desse.
minha dúvida é saber se quando eu acessar um site que esteja com: max-width: 480px o que vai acontecer? sobrar espaço? e a metatag viewport não auxilia em nada?
no exemplo do iphone acima veja que ele possui uma resolução de monitor de pc: 1136px como resolver isto?
detalhe: as vezes é comum se ajustar um site em: 980px para desktop e notebooks. imagine acessando com um iphone de 1136px agora.
Alexandre, o ideal seria que você tivesse um CSS específico para os principais breakpoints, conforme eu já te falei aqui…
Faça um CSS para max-width: 360, 480, 768, 1200… etc.
Não precisa de um arquivo CSS pra cada um, apenas use as Media Queries no seu arquivo CSS e vá ajustando apenas o que deve ajustar.
entendi. só uma última questão: um iphone 5 com 1136px de resolução pega as configurações de um site para monitores de pc a partir de 980px? ou não? como se comporta um iphone neste caso?
Dá uma olhada nisso http://stephen.io/mediaqueries/
se meu site é otimizado para ser visualizado em 768px(exemplo) e o camarada acessa por um celular de 1024px, ou seja, maior. o que vai acontecer? neste exemplo, pense que fiz assim: max-width: 768px
Se você configurou um tamanho limite de 768px, se alguém abrir num monitor maior, vai ver espaços vagos nas laterais…