INTRODUÇÃO À MEDIA     QUERIES     Felipe Fernandes       Vitor Freitas
OUTROS TEMPOS...• Estilo único• Desktops• Poucas variações de   resoluções
asdasd
MEDIA TYPES...   Utilizando o Media Types podemosavisar ao dispositivo interpretador qual será a folha de estilo utilizada...
NA PRÁTICA...   Utilizando o Media Types podemosavisar ao dispositivo interpretador qual será a folha de estilo utilizada ...
AVISANDO O     INTERPRETADOR...   Utilizando o Media Types podemosavisar ao dispositivo interpretador qual será a folha de...
OS TIPOS...•   all – todos os dispositivos•   aural – sintetizadores de voz•   braille – leitores de Braille•   embossed –...
asdasd
asdasd
NÚMEROS COMPROVAM... "Até 2015 o número de pessoas queterão acesso à internet em dispositivos móveis ultrapassará os via d...
RESOLUÇÕES ATUAIS...
MEDIA QUERIES...O Media Queries surgiu com o CSS3 eé destinado a detectar características     do dispositivo do visitante.
O QUE É? Não verifica apenas o tipo dodispositivo, mas também a sua          capacidade.
O QUE É? Age como estivesse fazendo umapergunta ao browser e a resposta é   sempre verdadeira ou falsa.
O QUE É?Permite checar parâmetroscomo a altura e a largura do         browser,  resolução, orientação..
EXEMPLO
EXEMPLO
EXEMPLO
OPERADORES LÓGICOS...Definem as condições para que sejam   criados diversos tipos de media  queries, são eles: not, and e ...
OPERADORES LÓGICOS...• operador not sentencia uma negação:• Only irá esconder os estilos de browsers que não  reconhecem m...
MEDIA FEATURES...É a lista de perguntas disponíveis   que você pode fazer para o              browser.
OS TIPOS...•   Width•   Height•   Device-width•   Device-height•   Orientation•   Aspect-ratio•   Device-aspect-ratio•   C...
MAIS UTILIZADOS...•   Width - Largura da janela que está exibindo a página•   Height - Altura da janela que está exibindo ...
COMPATIBILIDADE COM OS   NAVEGADORES...
COMPATIBILIDADE COM OS       NAVEGADORES...•   Firefox 3.5+•   Opera 9.5+•   Safari 3+•   Google Chrome 4+•   Internet Exp...
COMPATIBILIDADE COM OS    NAVEGADORES...Cerca de 70% de todos os browsers no   mercado aceitam Media Queries.
OS “OUTROS”...• Modernizr• Respond.js• Css3-mediaqueries-js
Responsivos vs       FluidosLayouts Fluidos fluem com otamanho da tela do usuárioResponsivos respondem ao tamanhoSimples a...
LAYOUT FLUÍDO..
LAYOUT FLUÍDO HÍBRIDO.
LAYOUT RESPONSIVO..
SITES          RESPONSIVOS...• http://earthhour.fr/• http://www.globo.com/• http://tableless.com.br/• http://stephencaver....
REFERÊNCIAS• http://www.ferramentasblog.com/2012/05/tudo-sobre-layout-  responsivo-responsive-design-introducao.html• http...
PERGUNTAS
Upcoming SlideShare
Loading in...5
×

Introdução à media queries

906

Published on

Slide da palestra "Introdução à Media Queries" #ForkInTuba.
Palestrantes: Felipe Fernandes, Vitor Freitas.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
906
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Introdução à media queries"

  1. 1. INTRODUÇÃO À MEDIA QUERIES Felipe Fernandes Vitor Freitas
  2. 2. OUTROS TEMPOS...• Estilo único• Desktops• Poucas variações de resoluções
  3. 3. asdasd
  4. 4. MEDIA TYPES... Utilizando o Media Types podemosavisar ao dispositivo interpretador qual será a folha de estilo utilizada e como será a apresentação.
  5. 5. NA PRÁTICA... Utilizando o Media Types podemosavisar ao dispositivo interpretador qual será a folha de estilo utilizada e como será a apresentação.
  6. 6. AVISANDO O INTERPRETADOR... Utilizando o Media Types podemosavisar ao dispositivo interpretador qual será a folha de estilo utilizada e como será a apresentação.
  7. 7. OS TIPOS...• all – todos os dispositivos• aural – sintetizadores de voz• braille – leitores de Braille• embossed – impressoras de Braille• handheld – dispositivos de mão. Por exemplo: celulares com telas pequenas.• print – impressoras convencionais• projection – apresentações de slides• screen – monitores coloridos• tty – teleimpressores e terminais• tv – televisores
  8. 8. asdasd
  9. 9. asdasd
  10. 10. NÚMEROS COMPROVAM... "Até 2015 o número de pessoas queterão acesso à internet em dispositivos móveis ultrapassará os via desktop." International Data Corporation
  11. 11. RESOLUÇÕES ATUAIS...
  12. 12. MEDIA QUERIES...O Media Queries surgiu com o CSS3 eé destinado a detectar características do dispositivo do visitante.
  13. 13. O QUE É? Não verifica apenas o tipo dodispositivo, mas também a sua capacidade.
  14. 14. O QUE É? Age como estivesse fazendo umapergunta ao browser e a resposta é sempre verdadeira ou falsa.
  15. 15. O QUE É?Permite checar parâmetroscomo a altura e a largura do browser, resolução, orientação..
  16. 16. EXEMPLO
  17. 17. EXEMPLO
  18. 18. EXEMPLO
  19. 19. OPERADORES LÓGICOS...Definem as condições para que sejam criados diversos tipos de media queries, são eles: not, and e only.
  20. 20. OPERADORES LÓGICOS...• operador not sentencia uma negação:• Only irá esconder os estilos de browsers que não reconhecem media queries:• É possível também agrupar varias media queries separados por vírgula que funcionaria como o operador "or”:
  21. 21. MEDIA FEATURES...É a lista de perguntas disponíveis que você pode fazer para o browser.
  22. 22. OS TIPOS...• Width• Height• Device-width• Device-height• Orientation• Aspect-ratio• Device-aspect-ratio• Color• Color-index• Monochrome• Resolution• Scan• Grid
  23. 23. MAIS UTILIZADOS...• Width - Largura da janela que está exibindo a página• Height - Altura da janela que está exibindo a página• Device-width - Largura total do dispositivo• Device-height - Altura total do dispositivo• Orientation - Modo paisagem ou retrato• Device-aspect-ratio - Formato da tela (16/9,1280/720...)
  24. 24. COMPATIBILIDADE COM OS NAVEGADORES...
  25. 25. COMPATIBILIDADE COM OS NAVEGADORES...• Firefox 3.5+• Opera 9.5+• Safari 3+• Google Chrome 4+• Internet Explorer 9+
  26. 26. COMPATIBILIDADE COM OS NAVEGADORES...Cerca de 70% de todos os browsers no mercado aceitam Media Queries.
  27. 27. OS “OUTROS”...• Modernizr• Respond.js• Css3-mediaqueries-js
  28. 28. Responsivos vs FluidosLayouts Fluidos fluem com otamanho da tela do usuárioResponsivos respondem ao tamanhoSimples assim!
  29. 29. LAYOUT FLUÍDO..
  30. 30. LAYOUT FLUÍDO HÍBRIDO.
  31. 31. LAYOUT RESPONSIVO..
  32. 32. SITES RESPONSIVOS...• http://earthhour.fr/• http://www.globo.com/• http://tableless.com.br/• http://stephencaver.com/• http://www.barackobama.com/
  33. 33. REFERÊNCIAS• http://www.ferramentasblog.com/2012/05/tudo-sobre-layout- responsivo-responsive-design-introducao.html• http://www.w3.org/TR/css3-mediaqueries/• http://blog.popupdesign.com.br/design-responsivo-iii-media-queries- e-compatibilidade/• http://tableless.com.br/introducao-sobre-media-queries/
  34. 34. PERGUNTAS

×