Nenhum produto encontrado nessa seleção.
Provavelmente você já ouviu algum comentário sobre media queries em algum site ou blog da Internet, mas você já utilizou o recurso? Sabe exatamente quando deve utilizá-las? Se a resposta for não, você está no lugar certo, vamos falar exatamente sobre as benditas Media queries e layout responsivos.
Atualmente, temos milhares de tipos de dispositivos para acessar a Internet: Smartphones, Tablets, Phablets, Desktops, Notebooks, Netbooks, TVs e eu poderia ficar listando mais uma tonelada de aparelhos com essa capacidade. De fato, até geladeiras têm acesso à Internet nos dias de hoje.
Com essas milhares de possibilidades, seu site poderá ser acessado em um punhado de resoluções de tela diferentes, veja aqui um exemplo de algumas possibilidades.
Isso sem contar o modo "paisagem", modo "retrato" e os dispositivos que redimensionam a tela, como os navegadores dos laptops e desktops.
Isso pode ser tornar uma dor de cabeça para o desenvolvedor, que por sua vez, nunca sabe exatamente onde o site desenvolvido será aberto, apenas presume essa informação.
Para nossa alegria, o CSS3 veio para resolver este problema com as media queries, que são exatamente o que seu nome sugere, consultas para saber qual o tipo de dispositivo está acessando o site que estou desenvolvendo.
Com elas você pode, além de fazer consultas para saber a largura e/ou altura da tela de um aparelho, ir bem mais fundo e verificar por aspect ratio, cores, orientação da tela e mais algumas opções. A melhor parte vem agora, depois de verificar a tela e presumir qual o dispositivo está acessando o seu site, você pode aplicar CSS exclusivo para aquele dispositivo sem afetar nenhuma parte do seu layout.
Vamos dar uma olhada na prática como isso funciona.
Opções das media queries
Como eu disse anteriormente, as media queries permitem verificar milhares de coisas sobre a tela dos dispositivos, veja alguns exemplos:
Width
Valor: <largura>
Aplica em: Tipos de mídia visual e tátil
Aceita prefixo max/min: sim
A propriedade "width" descreve a largura da tela do dispositivo incluindo a barra de rolagem.
Height
Valor: <altura>
Aplica em: Tipos de mídia visual e tátil
Aceita prefixo max/min: sim
A propriedade "height" descreve a altura da tela do dispositivo incluindo a barra de rolagem.
device-width
Valor: <largura>
Aplica em: Tipos de mídia visual e tátil
Aceita prefixo max/min: sim
A propriedade "device-width" descreve a largura da tela do dispositivo em que o layout foi processado.
device-height
Valor: <altura>
Aplica em: Tipos de mídia visual e tátil
Aceita prefixo max/min: sim
A propriedade "device-height" descreve a altura da tela do dispositivo em que o layout foi processado.
orientation
Valor: portrait | landscape
Aplica em: Dispositivos com orientação da mídia
Aceita prefixo max/min: não
A propriedade "orientation" descreve o estado em que o dispositivo está, retrato ou paisagem.
aspect-ratio
Valor: <ratio>
Aplica em: Dispositivos de mídias do tipo bitmap.
Aceita prefixo max/min: sim
A propriedade "aspect-ratio" descreve a razão entre os valores de width e height da tela.
device-aspect-ratio
Valor: <ratio>
Aplica em: Dispositivos de mídias do tipo bitmap.
Aceita prefixo max/min: sim
A propriedade "device-aspect-ratio" descreve a razão entre os valores de device-width e device-height da tela.
color
Valor: <inteiro>
Aplica em: tipos de mídia visual.
Aceita prefixo max/min: sim
A propriedade "color" descreve o número de bits por cor do dispositivo. O valor zero é monocromático.
Além de todas as opções que descrevi acima, existem mais algumas que possam ser de seu interesse. Se quiser ver a lista completa, leio o artigo no site da W3C, que é de onde estou tirando todas as informações.
Operadores das media queries?
Isso mesmo, as media queries aceitam operadores parecidos com os operadores de comparação da linguagem de programação que você utiliza: and, not e or (não exatamente). Na verdade "or" não existe, mas se você separar as condições por vírgula, vai funcionar do mesmo jeito. Porém, não se esqueça, o operador "not" só funciona para uma condição, se você fizer outra, deve utilizar novamente o "not" caso queira negar.
@media (max-width: 400px), (min-width: 900px) {
html { background: blue; }
}
@media not all and (max-width: 600px) {
html { background: blue; }
}
Media queries no mundo real
Certo, existem milhares de opções, mas e agora? Como colocar em prática?
Felizmente o site CSS Tricks deixou tudo prontinho pra gente neste artigo (em inglês – créditos são todos deles), vou apenas traduzir os comentários abaixo:
/* Smartphones (portrait e landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Estilos */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Estilos */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Estilos */
}
/* iPads (portrait e landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Estilos */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Estilos */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Estilos */
}
/* Desktops e laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Estilos */
}
/* Telas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Estilos */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}
(Traduzi uma palavra, se não me engano, hehe, "Estilos").
Agora é só copiar e colar no CSS do seu layout a parte que você deseja.
Concluindo
Se você ainda tem dúvidas sobre media queries, recomendo a leitura dos seguintes artigos:
Criação de um layout em tempo real: Agora pouco criei a estrutura de um layout responsivo de exemplo para o TutsUP, segue o link:
Sites externos:
Design Responsivo III – Media Queries e Compatibilidade: artigo bastante interessante que fala, além das media queries, mais alguns recursos sobre layouts responsivos.
CSS media queries: da Mozilla Developer Network (Em inglês).
Media queries: Site da W3C (Em inglês).
E se ainda assim continuar com dúvidas, basta questionar nos comentários, estaremos prontos para responder.
