Unidades de Medida em CSS: px, em, rem, %, vw, vh

No mundo do CSS, as unidades de medida são fundamentais para definir o tamanho de elementos e espaçamentos em uma página web. Neste artigo, vamos explorar as principais unidades de medida em CSS – px, em, rem, %, vw, e vh – e quando usar cada uma.

Introdução

Entender como as diferentes unidades de medida funcionam em CSS é essencial para criar layouts responsivos e adaptáveis. Cada unidade tem suas particularidades e pode ser mais adequada para diferentes situações. Vamos ver como cada uma delas funciona e como aplicá-las em exemplos práticos.

Unidades Absolutas vs. Unidades Relativas

Primeiro, é importante diferenciar entre unidades absolutas e unidades relativas. Unidades absolutas, como px (pixels), têm um valor fixo, enquanto unidades relativas, como em e rem, são baseadas em outros valores, como o tamanho da fonte do elemento pai ou raiz. Unidades de viewport, como vw e vh, são relativas ao tamanho da janela do navegador.

1. Pixels (px)

px é uma unidade absoluta que representa um ponto na tela. É a unidade mais simples de entender, pois tem um tamanho fixo e previsível.

Exemplo:

.elemento {
    width: 100px; /* Largura de 100 pixels */
    height: 50px; /* Altura de 50 pixels */
}

2. Em (em)

em é uma unidade relativa que é baseada no tamanho da fonte do elemento pai. Se o tamanho da fonte do elemento pai for 16px, então 1em será igual a 16px.

Exemplo:

.container {
    font-size: 16px; /* Tamanho da fonte do contêiner */
}

.elemento {
    width: 10em; /* Largura de 10 vezes o tamanho da fonte do pai (160px) */
}

3. Rem (rem)

rem é semelhante ao em, mas é relativo ao tamanho da fonte do elemento raiz (<html>). Isso torna o rem mais previsível e consistente em layouts complexos.

Exemplo:

html {
    font-size: 16px; /* Tamanho da fonte do elemento raiz */
}

.elemento {
    width: 10rem; /* Largura de 10 vezes o tamanho da fonte raiz (160px) */
}

4. Porcentagem (%)

A unidade % é relativa ao elemento pai. Pode ser usada para definir larguras, alturas, margens, e preenchimentos de forma proporcional.

Exemplo:

.container {
    width: 100%; /* Largura total do elemento pai */
}

.elemento {
    width: 50%; /* Metade da largura do elemento pai */
}

5. Viewport Width (vw)

vw é uma unidade relativa ao 1% da largura da viewport (janela do navegador). Por exemplo, 50vw seria igual a 50% da largura da viewport.

Exemplo:

.elemento {
    width: 50vw; /* Metade da largura da viewport */
}

6. Viewport Height (vh)

vh é semelhante ao vw, mas é relativa à altura da viewport. 100vh significa que o elemento terá 100% da altura da viewport.

Exemplo:

.elemento {
    height: 100vh; /* Altura igual à altura da viewport */
}

Quando Usar Cada Unidade

px: Use para tamanhos fixos e quando precisão é necessária. Ideal para bordas, fontes, e margens onde um tamanho fixo é desejável.
em: Útil para tamanhos relativos ao elemento pai, como espaçamentos dentro de um contêiner específico.
rem: Preferível para layouts responsivos e consistentes, onde tamanhos relativos ao elemento raiz são importantes.
%: Ideal para largura e altura de elementos que precisam ser proporcionais ao elemento pai.
vw e vh: Perfeitas para layouts responsivos que se adaptam ao tamanho da janela do navegador, como full-screen sections e elementos fluidos.

Exemplo Prático Completo

Vamos aplicar essas unidades em um layout simples.

CSS:

body {
    font-size: 16px; /* Tamanho da fonte raiz */
}

header {
    height: 50vh; /* Metade da altura da viewport */
    background-color: lightblue;
}

.main-content {
    width: 80%; /* 80% da largura do elemento pai */
    margin: 2em auto; /* Margem vertical de 2em e centralização horizontal */
    padding: 1rem; /* Preenchimento de 1rem */
    background-color: lightcoral;
}

footer {
    height: 10vh; /* 10% da altura da viewport */
    background-color: lightgreen;
    font-size: 1.5em; /* 1.5 vezes o tamanho da fonte do elemento pai */
}

HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unidades de Medida em CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>Header</header>
    <div class="main-content">Conteúdo Principal</div>
    <footer>Rodapé</footer>
</body>
</html>

Conclusão

Entender e usar as diferentes unidades de medida em CSS é crucial para criar layouts flexíveis, responsivos e bem estruturados. Saber quando usar px, em, rem, %, vw, e vh pode transformar a maneira como você estiliza seus sites e melhorar a experiência do usuário.