📏Grandezas de Tamanho
Grandezas de tamanhos em HTML incluem pixels (px) para tamanhos fixos, porcentagens (%) para tamanhos relativos ao pai, em (em) para fontes do pai, e rem (rem) para fontes da raiz.
Quando estamos criando uma página web, precisamos definir o tamanho de elementos como imagens, caixas de texto e outras áreas. Para isso, usamos diferentes unidades de medida. Vamos entender algumas das mais comuns de forma simples:
Pixels (px):
Imagine que a tela do seu computador é formada por milhões de pequenos pontos chamados pixels.
Quando dizemos que uma imagem tem 100 pixels de largura, estamos dizendo que ela ocupa 100 desses pontinhos na tela.
Exemplo:
<img src="imagem.jpg" width="100px">
Porcentagem (%):
Usar porcentagem é como dizer que algo deve ter um certo tamanho em relação a algo maior.
Se uma imagem tem 50% de largura, isso significa que ela ocupará metade da largura do contêiner em que está (elemento pai que no caso é a
div).Exemplo:
<div style="width: 80%;"> <img src="imagem.jpg" width="50%"> </div>Aqui, a imagem terá metade da largura do contêiner que, por sua vez, ocupa 80% da largura da tela.
Em (em):
Esta unidade é relativa ao tamanho da fonte do elemento pai.
Se a fonte do pai for 16px e definimos uma largura de 2em, o elemento terá 32px de largura (16px * 2).
Exemplo:
<div style="font-size: 16px;"> <div style="width: 2em;">Conteúdo</div> </div>
Rem (rem):
Semelhante ao
em, mas sempre relativa ao tamanho da fonte raiz (geralmente definida no<html>).Se a fonte raiz for 16px, 1rem será sempre 16px, independentemente do pai.
Exemplo:
<div style="width: 3rem;">Conteúdo</div>
Resumo
Pixels (px): Tamanho fixo em pontos da tela.
Porcentagem (%): Tamanho relativo ao elemento pai.
Em (em): Tamanho relativo à fonte do elemento pai.
Rem (rem): Tamanho relativo à fonte raiz.
Usar essas unidades de medida corretamente ajuda a criar páginas web que ficam bem em diferentes dispositivos e tamanhos de tela.
Atualizado
Isto foi útil?