Introdução à media queries

  • 823 views
Uploaded on

Slide da palestra "Introdução à Media Queries" #ForkInTuba. …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
823
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. INTRODUÇÃO À MEDIA QUERIES Felipe Fernandes Vitor Freitas
  • 2. OUTROS TEMPOS...• Estilo único• Desktops• Poucas variações de resoluções
  • 3. asdasd
  • 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. 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. 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. 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. asdasd
  • 9. asdasd
  • 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. RESOLUÇÕES ATUAIS...
  • 12. MEDIA QUERIES...O Media Queries surgiu com o CSS3 eé destinado a detectar características do dispositivo do visitante.
  • 13. O QUE É? Não verifica apenas o tipo dodispositivo, mas também a sua capacidade.
  • 14. O QUE É? Age como estivesse fazendo umapergunta ao browser e a resposta é sempre verdadeira ou falsa.
  • 15. O QUE É?Permite checar parâmetroscomo a altura e a largura do browser, resolução, orientação..
  • 16. EXEMPLO
  • 17. EXEMPLO
  • 18. EXEMPLO
  • 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. 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. MEDIA FEATURES...É a lista de perguntas disponíveis que você pode fazer para o browser.
  • 22. OS TIPOS...• Width• Height• Device-width• Device-height• Orientation• Aspect-ratio• Device-aspect-ratio• Color• Color-index• Monochrome• Resolution• Scan• Grid
  • 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. COMPATIBILIDADE COM OS NAVEGADORES...
  • 25. COMPATIBILIDADE COM OS NAVEGADORES...• Firefox 3.5+• Opera 9.5+• Safari 3+• Google Chrome 4+• Internet Explorer 9+
  • 26. COMPATIBILIDADE COM OS NAVEGADORES...Cerca de 70% de todos os browsers no mercado aceitam Media Queries.
  • 27. OS “OUTROS”...• Modernizr• Respond.js• Css3-mediaqueries-js
  • 28. Responsivos vs FluidosLayouts Fluidos fluem com otamanho da tela do usuárioResponsivos respondem ao tamanhoSimples assim!
  • 29. LAYOUT FLUÍDO..
  • 30. LAYOUT FLUÍDO HÍBRIDO.
  • 31. LAYOUT RESPONSIVO..
  • 32. SITES RESPONSIVOS...• http://earthhour.fr/• http://www.globo.com/• http://tableless.com.br/• http://stephencaver.com/• http://www.barackobama.com/
  • 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. PERGUNTAS