Reclamação de uma resposta simples
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Reclamação de uma resposta simples
O rem é uma unidade de medida no CSS relativa ao tamanho da fonte do elemento raiz (
). Ele é escalável: ao alterar o tamanho da fonte no , todos os elementos que usam rem se ajustam proporcionalmente. Isso facilita a criação de designs responsivos, que se adaptam a diferentes telas. Assim como uma imagem com unidades relativas se ajusta ao contexto, o rem mantém as proporções corretas do layout. E quando vocẽ pode ver a imagem pelo computador e pelo celular . No celular você pode aumentar a tela e não ficar a foto e as frase tudo bagunçado, conforme voçê vou amentando uo diminuindo a tela do celular ela vai se adaptando . BlzImagine que você tem um site com uma imagem e um texto, e ambos usam rem para definir seus tamanhos:
html { font-size: 16px; /* Tamanho da fonte raiz */ }
.imagem { width: 10rem; /* 160px (10 × 16) */ }
.texto { font-size: 1.5rem; /* 24px (1.5 × 16) */ } No computador, onde a tela é maior, o layout fica perfeito: a imagem tem 160px de largura e o texto tem 24px.
No celular, onde a tela é menor, você pode ajustar o tamanho da fonte raiz para, por exemplo, 14px:
html { font-size: 14px; /* Novo tamanho da fonte raiz para celular */ } Agora, os elementos se ajustam automaticamente:
A imagem terá 140px de largura (10rem × 14).
O texto terá 21px de tamanho (1.5rem × 14).
Isso garante que o layout não fique bagunçado e que tudo se ajuste de forma proporcional, independentemente do tamanho da tela.