Responsividade e Media Query

Prévia do material em texto

Responsividade e Media Query
 Responsividade é a capacidade da página alterar seu layout e aparência para se 
adequarem a diferentes tipos de tela, especialmente em relação às dimensões
 Para um site responsivo, empregamos estilos condicionais, ou seja, aplicados somente em 
certas situações (em certos tipos de tela, por exemplo)
 Exemplo: se o tamanho da tela for até 300px, mostre os elementos em coluna, se for 
maior que 300px, mostre os elementos em linha
Responsividade e Media Query
 Sintaxe de um estilo condicional (media query):
@media (condicional) {
[seu CSS]
}
Responsividade e Media Query
 Sintaxe de um estilo condicional (media query):
@media (condicional) {
[seu CSS]
} Este CSS só é aplicado se 
a condição for verdadeira
Responsividade e Media Query
@media (max-width: 300px) {
.container {
display: flex;
flex-direction: row
}
}
@media (min-width: 300px) and (max-width: 900px) {
.container {
display: flex;
flex-direction: column
}
}
FlexBox
 https://flexboxfroggy.com/
 Determina como serão dispostos os elementos dentro de um container
 display: flex → ‘ativa’ as propriedades do flex
flex-direction, justify-content, align-items, flex-wrap, flex-grow
https://flexboxfroggy.com/
flex-direction
 Determina qual será o main-axis
justify-content
 Disposição no main-axis (no computador, o horizontal, no celular, vertical)
align-items
 Disposição no cross-axis (no computador, o vertical, no celular, horizontal)
Mini-Projeto
Construindo nosso primeiro site real
Mini-Projeto