É com grande entusiasmo que apresento como explorei e apliquei os conceitos dos exercícios "Mão na massa". Foi uma jornada prática e muito esclarecedora!
- Adaptando o corpo do texto para unidades relativas
Nesta atividade, meu objetivo foi fazer com que o texto do meu projeto respondesse melhor às configurações de acessibilidade do navegador do usuário. Para isso, escolhi vários elementos de texto no meu style.css e alterei a unidade de medida do font-size de px para rem.
Por exemplo, meu .cabecalho__menu__link que antes poderia estar com 24px, eu converti para 1.5rem. Fiz o mesmo para o título principal (.apresentacao__conteudo__titulo, convertendo 36px para 2.25rem), para o texto dos parágrafos (.apresentacao__conteudo__texto, de 24px para 1.5rem), para os subtítulos dos links (.apresentacao__links__subtitulos), para os próprios links (.apresentacao__links__link) e também para o rodapé (.rodape).
Salvar o arquivo e testar no navegador, alterando o tamanho da fonte nas configurações de aparência, me mostrou como essa mudança permite que meu site se adapte de forma fluida. Foi muito gratificante ver os textos se ajustarem automaticamente!
- Convertendo pixels para rem em CSS
A tarefa de converter todas as unidades de font-size de pixels para rem foi um desafio super útil para melhorar a responsividade do texto. Seguindo a base de que 1rem equivale a 16px por padrão, eu fui buscando cada ocorrência de font-size no meu arquivo styles.css.
Encontrei e converti:
font-size: 24px; para font-size: 1.5rem; (aplicado em links de navegação, textos, subtítulos e no rodapé).
font-size: 36px; para font-size: 2.25rem; (no meu título principal).
Essa conversão foi um passo crucial para tornar meu site mais flexível e acessível.
- Melhorando a responsividade de um site
Depois de fazer todas as conversões para rem, abri a página do meu portfólio no navegador para testar a responsividade. Alterei as configurações de tamanho de fonte, passando de "Muito grande" para "Pequeno" e todas as opções intermediárias.
Observei que os textos do site se adaptaram muito bem a cada mudança. Eles aumentavam ou diminuíam de forma proporcional, mantendo a legibilidade. Isso me mostrou que as alterações que fiz realmente melhoraram a experiência do usuário em diferentes configurações. Não encontrei problemas significativos de layout ou legibilidade nessa fase, o que me deixou muito satisfeito com o resultado inicial.
- Ajustando o CSS para diferentes tamanhos de fonte
Após os testes de responsividade, notei que o site já estava se comportando de forma bastante satisfatória com os rem. As fontes se ajustam bem, e a estrutura geral permanece organizada.
Considerando que já utilizei Flexbox com gap e align-items para organizar os elementos, o layout já está com uma boa base responsiva. Por enquanto, não precisei fazer grandes ajustes de margin, padding ou font-size adicionais especificamente para resolver problemas em tamanhos de fonte extremos, pois a conversão para rem já resolveu a maior parte.
No entanto, sei que posso continuar aprimorando. Por exemplo, estou ciente de que a largura fixa (width: 615px;) do .apresentacao__conteudo e (width: 378px;) do .apresentacao__links__link pode ser um ponto a otimizar com unidades relativas ou max-width para telas muito específicas no futuro, garantindo ainda mais flexibilidade. Também adicionei a variável --cor-hover ao meu :root e ajustei seu uso, o que me dá mais controle sobre a personalização.
No geral, os resultados foram muito positivos, e estou feliz com a melhoria na responsividade do meu portfólio!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!