Unidades de Medida em CSS

João E. -

Unidades Absolutas

Pixels (px)

Pixels (px) são uma unidade de tamanho fixo usada em CSS. Eles são a unidade de medida mais básica e amplamente suportada. Um pixel geralmente corresponde a um único ponto na tela, embora isso possa variar dependendo da resolução da tela do dispositivo. Os pixels são úteis quando você precisa de controle preciso sobre tamanhos e posicionamento de elementos.

As vantagens de usar pixels incluem sua simplicidade e consistência entre dispositivos. Eles permitem medições exatas e são fáceis de entender. No entanto, os pixels têm algumas desvantagens. Eles não escalam bem quando o usuário aumenta ou diminui o zoom da página, o que pode afetar a acessibilidade. O uso de tamanhos fixos em pixels pode dificultar a criação de designs responsivos que se adaptam a diferentes tamanhos de tela.

Pontos (pt)

Pontos (pt) são outra unidade absoluta de medida. Um ponto equivale a 1/72 de uma polegada. Os pontos são mais comumente usados em mídia impressa, mas também podem ser usados em CSS. Eles fornecem uma maneira de especificar tamanhos relativos a uma unidade fixa de medida.

Em comparação com os pixels, os pontos são menos usados na web. Eles podem ser úteis ao criar estilos para elementos que serão impressos, como faturas ou relatórios. No entanto, os pontos não oferecem o mesmo nível de precisão que os pixels e podem não renderizar de forma consistente em diferentes dispositivos.

Polegadas (in) e Centímetros (cm)

Polegadas (in) e centímetros (cm) são unidades absolutas emprestadas de medidas físicas. Uma polegada equivale a 96 pixels em uma resolução de tela de 96 DPI (pontos por polegada). Os centímetros são semelhantes, com um centímetro equivalendo a 37,8 pixels a 96 DPI.

Essas unidades são raramente usadas no design web porque não se adequam bem à mídia baseada em tela devido aos variados tamanhos e resoluções de monitores, tornando difícil prever como os elementos medidos em polegadas ou centímetros aparecerão com precisão nas telas.

Unidades Relativas

Porcentagens (%)

Porcentagens (%) são unidades de medida relativas em CSS. Elas definem tamanhos, espaçamentos e posicionamentos de elementos em relação ao seu contêiner pai. O tamanho de um elemento definido em porcentagens é calculado com base no tamanho do seu elemento pai.

Exemplo de Porcentagem

<div style="width: 50%;">Esta div ocupa metade da largura do seu contêiner pai.</div>

Em (em)

Em (em) é uma unidade relativa baseada no tamanho da fonte de um elemento. Um em é igual ao tamanho da fonte do elemento. Por exemplo, se um elemento tem um tamanho de fonte de 16 pixels e você define o preenchimento como 1em, o preenchimento será igual a 16 pixels.

Exemplo de Em

<div style="font-size: 16px; padding: 1em;">Esta div tem preenchimento igual ao seu tamanho de fonte de 16 pixels.</div>

Rem (rem)

Rem (rem) é similar ao em, mas é relativo ao tamanho da fonte do elemento raiz (geralmente ). "Rem" significa "root em" (em raiz).

A principal diferença entre rem e em é que as unidades rem são sempre baseadas no tamanho da fonte raiz, enquanto as unidades em são baseadas no tamanho da fonte do próprio elemento. Isso torna as unidades rem mais previsíveis e mais fáceis de lidar quando se trata de elementos aninhados.

Exemplo de Rem

<div style="font-size: 16px;"> 
    <div style="font-size: 2rem;">O tamanho da fonte desta div é duas vezes o tamanho da fonte raiz.</div>
</div>

Unidades de Viewport (vw, vh, vmin, vmax)

Unidades de viewport são medidas relativas baseadas no tamanho da viewport—a área visível de uma página web:

  1. vw (viewport width): 1vw é igual a 1% da largura da viewport.
  2. vh (viewport height): 1vh é igual a 1% da altura da viewport.
  3. vmin (viewport minimum): 1vmin é igual ao menor valor entre vw ou vh.
  4. vmax (viewport maximum): 1vmax é igual ao maior valor entre vw ou vh.

As unidades de viewport ajudam a criar elementos que se adaptam às dimensões da viewport, independentemente do tamanho da tela:

  • Definir a largura de um elemento como 50vw faz com que ele ocupe metade da largura da viewport.
  • Útil para seções em tela cheia ou tipografia responsiva que se adapta a diferentes dispositivos e orientações.

Exemplo de Unidades de Viewport

<div style="width: 50vw; height: 50vh;">Esta div ocupa metade da largura e altura da viewport.</div>

Quando Usar Cada Unidade

A escolha da unidade de medida correta em CSS depende da situação e de como você quer que os elementos se comportem na sua página web. Aqui estão algumas orientações para usar unidades absolutas versus unidades relativas:

Use unidades absolutas como pixels (px) quando precisar de controle exato sobre os tamanhos e posicionamento dos elementos. Pixels são úteis nestes casos:

  • Criação de layouts de largura fixa
  • Definição de bordas e espessura de linhas
  • Especificação de dimensões exatas para imagens e elementos de mídia

Evite usar pixels para tamanhos de fonte, pois eles não se adaptam bem quando o usuário aumenta ou diminui o zoom da página.

Use unidades relativas como porcentagens (%) quando quiser que os elementos se adaptem ao tamanho do contêiner pai. Porcentagens são úteis nestas situações:

  • Criação de layouts responsivos que se ajustam a diferentes tamanhos de tela
  • Definição de larguras e alturas de elementos em relação ao seu pai
  • Posicionamento de elementos usando valores relativos (ex: left: 50%; top: 25%)

Use unidades em quando quiser tamanhos relativos ao tamanho da fonte de um elemento. Unidades em funcionam bem para:

  • Definir preenchimento e margens que se ajustam com o tamanho da fonte
  • Definir tamanhos para elementos aninhados que herdam o tamanho da fonte de seu pai
  • Criar tipografia escalável que mantém as proporções

Use unidades rem quando quiser tamanhos relativos ao tamanho da fonte do elemento raiz. Unidades rem ajudam com:

  • Definição de tamanhos de fonte e espaçamento consistentemente em todo o documento
  • Criação de componentes escaláveis independentes do tamanho da fonte de seu pai
  • Manutenção de proporções consistentes mesmo se o tamanho da fonte raiz mudar

Use unidades de viewport (vw, vh, vmin, vmax) quando quiser que os elementos se adaptem ao tamanho da janela de visualização. Unidades de viewport são boas para:

  • Criação de seções de tela cheia ou imagens de destaque
  • Tornar a tipografia responsiva em diferentes tamanhos de tela
  • Definir tamanhos e espaçamentos baseados nas dimensões da janela de visualização

Você também pode combinar diferentes unidades de medida para designs mais flexíveis.

Exemplo: Combinando unidades para flexibilidade

<div style="width: 50%; border: 2px solid black; font-size: 1rem; padding: 1em;"> 
    Este elemento combina porcentagens para largura, pixels para espessura de borda, rems para tamanho de fonte e ems para preenchimento.
</div>

A escolha da unidade de medida depende das necessidades do seu projeto e de quão responsivo você quer que ele seja. Experimente diferentes unidades e combinações para encontrar o que funciona melhor.