Reclamação de uma resposta simples
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.