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?
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!