1) Adaptando o corpo do texto para unidades relativas
Altere o font-size dos elementos de texto, como <p>
ou <h2>
, de px para rem no arquivo style.css. Por exemplo, converta font-size: 18px para font-size: 1.125rem (18px/16px = 1.125rem), salve o arquivo e teste no navegador.
2) Convertendo pixels para rem em CSS
No styles.css, localize todas as ocorrências de font-size e converta de px para rem, usando 16px como base. Por exemplo, font-size: 24px deve ser convertido para font-size: 1.5rem.
3) Melhorando a responsividade de um site
Teste a responsividade do site alterando o tamanho da fonte no navegador e observe se os textos se adaptam bem, anotando quaisquer problemas de layout ou legibilidade encontrados.
4) Ajustando o CSS para diferentes tamanhos de fonte
Ajuste margin, padding ou font-size no styles.css para melhorar a legibilidade em diferentes tamanhos de fonte e teste novamente a responsividade do site.