como eu estilizaria no css pra abrir o projeto em diversos dispositivos sem perder a formatação do projeto?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
como eu estilizaria no css pra abrir o projeto em diversos dispositivos sem perder a formatação do projeto?
Olá, Adna! Tudo bem?
Para que seu projeto seja exibido corretamente em diferentes dispositivos, é importante utilizar técnicas de design responsivo em seu CSS. O design responsivo permite que o layout do seu site se adapte a diferentes tamanhos de tela, mantendo a aparência e a funcionalidade do projeto.
Uma das técnicas mais comuns é o uso de media queries, que permitem definir regras de estilo específicas para diferentes tamanhos de tela. Por exemplo, você pode definir uma largura máxima para o seu site e, a partir desse ponto, aplicar estilos diferentes para garantir que o conteúdo seja exibido de forma adequada.
Veja um exemplo de como utilizar media queries em seu CSS:
/* Estilos gerais */
body {
font-size: 16px;
}
/* Estilos para telas menores que 768px */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Estilos para telas menores que 480px */
@media (max-width: 480px) {
body {
font-size: 12px;
}
}Nesse exemplo, estamos definindo estilos gerais para o body do site, e em seguida, utilizando media queries para ajustar o tamanho da fonte em telas menores que 768px e 480px.
Além das media queries, existem outras técnicas que podem ser utilizadas para garantir um design responsivo, como o uso de unidades de medida flexíveis, como % e em, e o uso de grids e flexbox para organizar o layout do site.
Espero ter ajudado e bons estudos!