Aprenda a fazer um site responsivo

Transcript

1. APRENDA A FAZER UM SITE RESPONSIVO @di3goleite
2. DIEGO LEITE AdMobilize UEFS @di3goleite
3. @di3goleite
4. • Introdução ao problema • Unidades de medida para fonte • Media Queries • Chrome DevTools • Como descobrir os breakpoints do projeto? • Mobile First • Flexbox • Demonstração ROTEIRO @di3goleite
5. INTRODUÇÃO AO PROBLEMA @di3goleite Mobile Tablet
6. INTRODUÇÃO AO PROBLEMA @di3goleite Desktop
7. Como fazer para criar esse layout?
8. CSS units for font-size - Definições • px: Mais fácil de mensurar. Todas as outras unidades de medida se baseiam nessa. • em: 1 em é igual ao valor computado de tamanho da fonte em relação ao elemento pai. • rem: é o valor relativo ao root do html, e não em relação ao elemento pai. O valor padrão para o tamanho da fonte no root é 16px. Portanto: 1rem = 16px.
9. CSS units for font-size - Exemplo @di3goleite Exemplo 1 Exemplo 2
10. Media Queries - Definições • @media: essa propriedade é utilizada para aplicar diferentes regras de estilo de acordo com a resolução do device. • not, only, and, or(vírgula): palavras reservadas utilizadas para realizar operações lógicas em media queries. • min-width, max-width: propriedades que definem a largura mínima ou máxima de um elemento.
11. Media Queries - Exemplo
12. Chrome DevTools - Breakpoints Demonstração
13. Como descobrir os breakpoints do projeto?
14. Como descobrir os breakpoints do projeto?
15. Como descobrir os breakpoints do projeto?
16. Como descobrir os breakpoints do projeto? largura exata de dispositivos populares (320px, 768px, 1024px)
17. Como descobrir os breakpoints do projeto?
18. Como descobrir os breakpoints do projeto?
19. Mobile First - Definição “Quando você usa o conceito mobile-first para fazer seu estilo CSS significa dizer que os estilos são aplicados primeiro para dispositivos móveis, só então são aplicados substituições, estilo avançados e consultas de media queries para telas maiores.”
20. Mobile First - Exemplo Mobile First
21. Mobile First - Exemplo Desktop First
22. Mobile First - Why Code this Way? Codar para telas mais largas usualmente é mais complicado do que fazer o mesmo para telas menores. Isto explica o motivo pelo qual codar mobile first te ajuda a simplificar o código da aplicação!
23. Mobile First - Sobre complexidade de código Mobile First
24. Mobile First - Sobre complexidade de código Desktop First
25. Flexbox - Background • The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). • The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
26. Flexbox - Basics & Terminology
27. Flexbox - Background
28. Flexbox - flex-direction
29. Flexbox - flex-wrap
30. Flexbox - justify-content
31. Flexbox - align-items
32. Flexbox - align-content
33. Demonstração!!! Level 1 Level 2
34. PERGUNTAS? Twitter e GitHub @di3goleite
35. Referências • https://medium.com/code-better/css-uni ts-for-font-size-px-em-rem-79f7e592bb9 7 • https://www.w3schools.com/cssref/css3_ pr_mediaquery.asp • https://desenvolvimentoparaweb.com/cs s/css-breakpoints-maneira-correta/ • https://www.todoespacoonline.com/w/20 15/03/como-escrever-seu-css-para-projet os-mobile-first/ • https://zellwk.com/blog/how-to-write-mo bile-first-css/ • https://css-tricks.com/snippets/css/a-guid e-to-flexbox/ @di3goleite
36. Obrigado! @di3goleite