Início > CSS, WEB Design > Tutorial – Como trabalhar com design responsivo

Tutorial – Como trabalhar com design responsivo

O segredo do design responsivo são as media queries. Note neste exemplo: Clique aqui

Para ver funcionando, diminua a largura do seu navegador. Viu?

Não é tão complicado como você imaginava.

O que são as media queries?

Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.

Então vamos lá para um exemplo.

Primeiro passo é definir o viewport para largura. Fica assim:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Depois linkamos as folhas de estilo externas específicas para iphone e ipad:

<!--[if !IE]>--> <link type="text/css" rel="stylesheet" media="only screen and
(max-device-width: 480px)" href="iphone.css" /> <link type="text/css" 
rel="stylesheet" media="only screen and (min-device-width: 768px) 
and (max-device-width: 1024px)" href="ipad.css" /> <!--<![endif]-->

Ou então colocamos os estilos no mesmo arquivo mesmo. Ficaria mais ou menos assim:

 /* target the minimum width of the browser window */ @media screen and 
(min-width: 900px) { .class { background: #FFE11A; } }
/* target the maximum width of the browser window */
 @media screen and (max-width: 600px)
{ }
/* target both the minimum and maximum width of the browser window */
 @media screen and (min-width: 600px) and (max-width: 900px)
{ }
/* target the maximum width of the device */
 @media only screen and (max-device-width: 480px)
{ }
/* target the maximum width of the device and it's orientation */
 @media only screen and (max-device-width: 480px) and (orientation:portrait)
{ }
 @media only screen and (max-device-width: 480px) and (orientation:landscape)
{ }
/* target the iPhone4 retina display */
 @media only screen and (max-device-width: 480px) and
(-webkit-min-device-pixel-ratio: 2)
{ }
}

Compatibilidade com Browsers: As últimas versões do Firefox, Safari, Chrome e Opera já comportam tranquilamente as media queries. O IE9 usará ( em breve ) e o IE8 se consegue com o plugin que você encontra aqui.

Outras fontes de tutoriais e exemplos são os seguintes sites:

mediaqueri.es – Coleções de design responsivos.
Less Framework – Um sistema de grids CSS para websites responsivos.
CSSgrid – Um grid wide de 1140px, com 12 colunas. Ideal para versões mobile.
A Jason Grigsby article – Artigo sobre media queries para mobile.

Divirta-se e inspire-se.

Anúncios
Categorias:CSS, WEB Design Tags:,
  1. outubro 8, 2011 às 4:24 pm

    Guilherme,

    Parabéns pelo tuto… dá uma boa visão (mesmo que resumida) sobre o “misterioso” design responsivo…

    Mas, para que a compreensão seja completa, gostaria que fosse sanado uma pequena falha:

    No campo “Depois linkamos as folhas de estilho externas específicas para iphone e ipad:”
    a linha do código não aparece completamente. Voce poderia fornecer o codigo completo?

    Grato

    Claudio Candido

    • outubro 10, 2011 às 11:52 am

      Obrigado Claudio Candido. Espero sempre poder auxiliar a todos os leitores. Quanto ao erro, dei uma melhorada no código, embora o wordpress tenha um pequeno bug na formatação do estilo de código. TIve que dar quebras de linha onde não devia, então na hora de copiar o código apenas suba o parágrafo quando for necessário. Um abraço.

  2. carlos
    dezembro 23, 2013 às 7:22 pm

    Ótima postagem, e muito legal da sua parte compartilhar os links. continue assim.
    forte abraço.

  1. maio 14, 2012 às 8:54 pm
  2. novembro 20, 2012 às 8:39 pm

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: