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

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 podemos
avisar ao dispositivo interpretador qual
será a folha de estilo utilizada e como
será a apresentação.

5. NA PRÁTICA...
Utilizando o Media Types podemos
avisar ao dispositivo interpretador qual
será a folha de estilo utilizada e como
será a apresentação.

6. AVISANDO O
INTERPRETADOR...
Utilizando o Media Types podemos
avisar 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 que
terã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 do
dispositivo, mas também a sua
capacidade.

14. O QUE É?
Age como estivesse fazendo uma
pergunta ao browser e a resposta é
sempre verdadeira ou falsa.

15. O QUE É?
Permite checar parâmetros
como 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
Fluidos
Layouts Fluidos fluem com o
tamanho da tela do usuário
Responsivos respondem ao tamanho
Simples 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