Carregado porFelipe de Bittencourt Fernandes
Introdução à media queries
O documento aborda as media queries, uma técnica do CSS3 que permite adaptar o estilo de um site de acordo com as características do dispositivo do usuário, como largura e altura da tela. Explora a compatibilidade das media queries com diversos navegadores e diferencia layouts responsivos de fluidos. Conclui com exemplos de sites que utilizam design responsivo e referências para aprofundamento no tema.
Introdução à media queries
- 1. INTRODUÇÃO À MEDIA QUERIES Felipe Fernandes Vitor Freitas
- 2. OUTROS TEMPOS... • Estiloúnico • Desktops • Poucas variações de resoluções
- 3.
- 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.
- 9.
- 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.
- 12. MEDIA QUERIES... O MediaQueries 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 É? Permitechecar parâmetros como a altura e a largura do browser, resolução, orientação..
- 16.
- 17.
- 18.
- 19. OPERADORES LÓGICOS... Definem ascondições para que sejam criados diversos tipos de media queries, são eles: not, and e only.
- 20. OPERADORES LÓGICOS... • operadornot 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... É alista 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.
- 30.
- 31.
- 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.