Na aula de Responsividade avançada, você aprenderá técnicas mais avançadas para tornar seu design responsivo e adaptável a diferentes dispositivos e tamanhos de tela. Alguns dos tópicos abordados podem incluir:
- Unidades de medida relativas, como porcentagens e viewport units
- Media queries avançados, como combinando condições e utilizando operadores lógicos
- Técnicas de layout flexível, como flexbox e grid layout
- Otimização de imagens para diferentes dispositivos e tamanhos de tela
- Design responsivo com tipografia
- Testando e depurando designs responsivos em vários dispositivos e navegadores
Ao final desta aula, você será capaz de criar layouts responsivos mais avançados e estilizados para seus projetos, além de ter uma melhor compreensão das técnicas avançadas de responsividade em CSS.
Aqui está um exemplo de código CSS para responsividade avançada usando media queries:
css/* Estilos padrão para dispositivos de tela grande */
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu {
list-style: none;
display: flex;
flex-direction: row;
}
.menu li {
margin-right: 1rem;
}
.logo {
font-size: 2rem;
}
/* Estilos para dispositivos móveis */
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
align-items: flex-start;
}
.menu {
flex-direction: column;
align-items: flex-start;
}
.menu li {
margin-right: 0;
margin-bottom: 0.5rem;
}
.logo {
font-size: 1.5rem;
}
}Nesse exemplo, há um conjunto de estilos padrão para dispositivos de tela grande e um conjunto diferente para dispositivos móveis, definido por meio da media query @media screen and (max-width: 768px).
Os estilos padrão definem um layout de container flexível com menu e logo posicionados em lados opostos. Os estilos móveis, por outro lado, alteram o layout do container para uma direção de coluna e o posicionamento do menu e logo para a esquerda. Além disso, os itens de menu têm uma margem inferior em vez de uma margem direita e a fonte da logo é menor.