Unidades de Medidas Absolutas

As unidades de medida absolutas têm um valor fixo, independentemente de outras propriedades. Elas são úteis para especificar tamanhos e dimensões que precisam ser constantes, ou seja, o tamanho não vai mudar por interferência de outros fatores ou alterações.

- Pixels (px)

A unidade px representa pixels. É uma unidade fixa e é amplamente utilizada para definir tamanhos precisos.

Texto com largura de 200px e altura de 100px.

Pixel, resolucção e densidade

Pixels, resolução e densidade são conceitos fundamentais para entender a qualidade e a clareza das imagens em displays. Pixels são as menores unidades de uma imagem digital e representam os pontos individuais que formam a imagem exibida na tela. Resolução refere-se ao número total de pixels em uma tela ou imagem, geralmente expressa em termos de largura por altura (por exemplo, 1920x1080). Uma resolução maior significa mais pixels e, portanto, mais detalhes e clareza na imagem. Densidade de pixels (ou PPI - pixels por polegada) é a medida de quantos pixels estão presentes em uma polegada da tela. Uma maior densidade de pixels indica que os pixels estão mais próximos uns dos outros, resultando em uma imagem mais nítida e menos visível em qualquer distorção ou pixelização. Em resumo, enquanto a resolução define a quantidade total de pixels disponíveis, a densidade de pixels mede a concentração desses pixels em uma área específica, influenciando diretamente a qualidade visual da tela.

Pixels Físicos e Lógicos

Em displays digitais, pixels físicos são os pontos reais no hardware da tela, enquanto pixels lógicos são a unidade de medida usada no CSS para renderizar elementos na tela.

Pixel Físico

Os pixels físicos são os reais pontos de luz que compõem uma tela. A imagem abaixo mostra uma representação do que seria um pixel físico em um display:

Pixel Físico

Pixel Lógico

Os pixels lógicos são usados pelo CSS para definir tamanhos e posições. Eles não correspondem diretamente aos pixels físicos, pois podem ser escalados dependendo da densidade da tela. A imagem abaixo mostra um exemplo de como um pixel lógico pode ser exibido em uma tela:

Pixel Lógico

- Pontos (pt)

A unidade pt é usada principalmente para impressões e é equivalente a 1/72 polegada.

Texto com largura de 200pt e altura de 100pt.

- Centímetros (cm)

A unidade cm é usada para medir em centímetros e é mais comumente usada em impressão.

Texto com largura de 10cm e altura de 5cm.

Unidades de Medidas Relativas

As unidades de medida relativas são baseadas em outros elementos, como o tamanho da fonte do elemento pai. Elas são úteis para criar layouts responsivos e adaptáveis.

O elemnento raiz <html> herda o valor padrão do tamanho das fontes dos navegadores e esse tamanho pode ser configurado nas preferências do browser.

Vantagens de utilizar as unidades em e rem

Traz flexibilidade aos projetos e a capacidade de dimensionar os elementos das páginas web, resulado em designs:

  • Fácil manutenção
  • Responsivos
  • Controle de escla pelos navegadores.

- Em (em)

A unidade em é relativa ao tamanho da fonte do elemento pai. Se o tamanho da fonte do pai for 16px, 1em será igual a 16px.

  • Contexto dos elementos
font-size: 16px;
font-size: 2em = 32px;
font-size: 2em = 64px;

Quando usa em na propriedade width o tamanho é calculado em relação ao font-size do próprio elemento.

font-size: 30px;
width: 10em = 300px;

- Rem (rem)

A unidade rem é relativa ao tamanho da fonte do elemento raiz, chamado root, que no caso, é a tag html.

  • Tamanhos consistentes, sem herança
  • Melhor experiência do usuário

- Percentagem (%)

A unidade % é relativa ao tamanho do elemento pai. Por exemplo, 50% da largura do elemento pai.

Texto com largura de 50% e altura de 25%.

- Viewport Width (vw) e Viewport Height (vh)

Viewport é a área visível de uma página web, podendo variar de dispositivo para dispositivo. As undidades de medida viewport, vão ser calculadas em relação ao tamanho da área em que o usuário está vendo sua página.

As unidades vw e vh são relativas ao tamanho da viewport. 1vw é igual a 1% da largura da viewport e 1vh é igual a 1% da altura da viewport.

Texto com largura de 50vw e altura de 25vh.

Calculando valores em CSS

No CSS, podemos usar funções para calcular valores dinâmicos para tamanhos, margens, espaçamentos e muito mais. Estas funções são úteis para criar layouts responsivos e flexíveis, especialmente ao trabalhar com diferentes unidades de medida como px, em, %, etc. Vamos explorar algumas das funções mais comuns como calc(), max() e min().

Usando calc() para cálculos dinâmicos

A função calc() permite realizar operações matemáticas em valores CSS, como somar, subtrair, multiplicar ou dividir diferentes unidades. Exemplo:

Tamanho calculado com calc()

Usando max() para escolher o maior valor

A função max() escolhe o maior valor entre dois ou mais parâmetros. Exemplo:

Altura baseada em max()

Usando min() para escolher o menor valor

A função min() escolhe o menor valor entre dois ou mais parâmetros. Exemplo:

Largura baseada em min()

Usando clamp() para limitar valores

A função clamp() define um valor baseado em três parâmetros: o valor mínimo, o preferencial e o valor máximo. Exemplo:

Largura limitada com clamp()