Bom dia, ao iniciar um projeto do zero como devo configurar a responsividade no css, ou é necessario primeiro fazer tudo em px? tem como me fornecer um modelo que exemplifique a criação do css de forma já responsiva?
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!
Bom dia, ao iniciar um projeto do zero como devo configurar a responsividade no css, ou é necessario primeiro fazer tudo em px? tem como me fornecer um modelo que exemplifique a criação do css de forma já responsiva?
Olá, como vai?
Trabalhar com unidades relativas como rem é uma ótima abordagem para garantir a responsividade do seu projeto desde o início. Não é necessário começar com tudo em px para depois converter, você pode já iniciar utilizando rem e outras unidades relativas.
Deixei abaixo um exemplo básico de como você pode configurar seu CSS de forma responsiva desde o início:
html {
font-size: 100%; /* Isso equivale a 16px, que é o padrão na maioria dos navegadores */
}
body {
font-size: 1rem; /* Isso equivale a 16px */
line-height: 1.5; /* Ajuste para melhorar a legibilidade */
margin: 0;
padding: 0;
}
h1 {
font-size: 2rem; /* Equivale a 32px */
margin-bottom: 1rem;
}
p {
font-size: 1rem; /* Equivale a 16px */
margin-bottom: 1rem;
}
/* Exemplo de media query para ajustar fontes em telas menores */
@media (max-width: 600px) {
html {
font-size: 90%; /* Reduz o tamanho base para 14.4px */
}
}
Neste exemplo, configuramos o tamanho da fonte base no html para 100%, que geralmente é 16px. A partir daí, usamos rem para definir tamanhos relativos, o que facilita a adaptação do layout em diferentes dispositivos e tamanhos de tela. A media query no final ajusta o tamanho da fonte base para telas menores, tornando o texto mais legível em dispositivos móveis.
Para saber mais sobre responsividade, recomendo o vídeo Como deixar o Layout Responsivo no seu site .
Espero ter ajudado. Conte sempre com o apoio do fórum :)
Um abraço e bons estudos!