Lista de Exercício | HTML e CSS: trabalhando com responsividade e publicação de projetos

1) Adaptando o corpo do texto para unidades relativas

Documento HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projeto Responsivo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Este é um subtítulo em rem</h2>
    <p>Este é um parágrafo adaptado para unidades relativas (rem). Alterações de tamanho de fonte podem ser feitas nas configurações do navegador.</p>
</body>
</html>

Documento CSS

/* No CSS, alterando a unidade de medida do font-size de px para rem */
body {
    font-size: 16px; /* A base de 1rem será igual a 16px */
    line-height: 1.5;
}

h2 {
    font-size: 1.5rem; /* Substituímos 24px por 1.5rem (24/16 = 1.5) */
}

p {
    font-size: 1.125rem; /* Parágrafo com 18px convertido para 1.125rem (18/16 = 1.125) */
}

Comentários:O exemplo acima aplica unidades relativas (rem) para font-size em vez de pixels (px). O valor base é 16px, ou seja, 1rem é igual a 16px. Esse ajuste faz com que o texto seja mais flexível e se adapte melhor às configurações de tamanho de fonte do usuário.

2) Convertendo pixels para rem em CSS

Aqui está a explicação sobre como converter as unidades de px para rem em seu arquivo CSS:

Documento CSS

h1 {
    font-size: 32px;
}

h2 {
    font-size: 24px;
}

p {
    font-size: 18px;
}
/* CSS em px*/

Documento CSS

h1 {
    font-size: 2rem; /* 32px convertido para rem (32/16 = 2) */
}

h2 {
    font-size: 1.5rem; /* 24px convertido para rem (24/16 = 1.5) */
}

p {
    font-size: 1.125rem; /* 18px convertido para rem (18/16 = 1.125) */
}
/* CSS em rem*/

Comentários:As unidades de px foram substituídas por rem, conforme o valor padrão de 1rem = 16px. Isso melhora a escalabilidade e facilita ajustes de tamanho com base nas configurações do navegador do usuário.

3) Melhorando a responsividade de um site

Instruções para testar a responsividade:

Abrir a página no navegador.
Alterar o tamanho da fonte nas configurações de aparência do navegador (como "Muito grande", "Grande", "Médio", "Pequeno" e "Muito pequeno").
Observar como os textos do site se adaptam a cada mudança.

4) Ajustando o CSS para diferentes tamanhos de fonte

Documento CSS

/* Ajustes para diferentes tamanhos de fonte */
body {
    font-size: 16px;
}

h2 {
    font-size: 1.5rem; /* Subtítulo maior */
}

/* Ajuste de padding e margin para manter a legibilidade em diferentes tamanhos de fonte */
section {
    margin: 2rem;
    padding: 1.5rem;
}

@media (max-width: 768px) {
    h2 {
        font-size: 1.25rem; /* Reduzindo o subtítulo em telas menores */
    }

    p {
        font-size: 1rem; /* Ajustando o tamanho do texto para telas pequenas */
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px; /* Reduzindo ainda mais o tamanho da fonte em telas muito pequenas */
    }
}