1 - Adaptando o corpo do texto para unidades relativas

CSS:

.cabecalho__navegacao__link {

    color: var(--cor-destaque);
    font-family: var(--fonte-paragrafo);
    font-size: 1.5rem;        /* 24px / 16 = 1.5 REM*/
    font-weight: 600;
    text-decoration: none;
}

Portfólio:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 - Convertendo pixels para rem em CSS

CSS:

font-size: 1.5rem;        /* 24px / 16 = 1.5 REM*/
font-size: 2.25rem;             /* 36 / 16 = 2.25 REM*/
font-size: 1.5rem;                  /* 24 / 16 = 1.5 REM*/
font-size: 1.5rem;          /* 24 / 16 = 1.5 REM */
font-size: 1.5rem;            /* 24 / 16 = 1.5REM */
font-size: 1.5rem;            /* 24px / 16 = 1.5REM*/

3 - Melhorando a responsividade de um site

Muito Grande:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Grande:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Médio:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Pequeno:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Muito Pequeno:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 - Ajustando o CSS para diferentes tamanhos de fonte

Resposta: Acredito que seria necessário transformar as porcentagens e os pixels de tudo para o REM.

Dúvida:

Posso deixar o número na forma de fração ou é obrigatório escrever em decimal? Eu testei deixar "36/16" e ficou menor do que 2.25rem. Por que isso acontece sendo que são o mesmo número?

Oi, Victor! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Achei ótimo que você está aplicando o conceito de unidades relativas no CSS. Você mostrou atenção à responsividade e os comentários que adicionou ao lado dos valores ajudam bastante na organização e entendimento do código.

Sobre sua dúvida: quando usamos font-size: 36/16;, o CSS não interpreta isso como uma divisão. Ele espera diretamente um valor numérico válido, como 2.25rem. Por isso, mesmo que 36 dividido por 16 seja 2.25, o navegador entende 36/16 como inválido ou como um valor literal, o que leva a um resultado diferente ou inesperado.

Uma dica interessante para o futuro é usar o calc() quando quiser fazer contas dentro do CSS. Por exemplo:


.titulo {
    font-size: calc(36px / 16);
}

Esse código faz o cálculo dentro do CSS, e o navegador consegue interpretar corretamente. calc() permite usar expressões matemáticas diretamente nas propriedades.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!