• Save
Introdução à media queries
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Introdução à media queries

  • 1,351 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
1,351
On Slideshare
1,243
From Embeds
108
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 108

http://forkintuba.wordpress.com 108

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