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. -
vwevh: 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.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com o WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
