19.04.2025

px ou rem em CSS: Escolhendo Unidades de Medida para Tamanhos

Resposta Rápida

Se o seu objetivo é design responsivo e tipografia personalizável pelo usuário, então a solução ideal é usar unidades rem. Elas mudam com base no tamanho da fonte base no navegador. A unidade rem é relevante em 2022 para criar layouts resilientes. No entanto, se você preferir controle absoluto sobre os tamanhos dos elementos e quiser que eles permaneçam inalterados, então opte por px. Esse tipo de unidade é ótimo para posicionamento preciso em pixels.

Exemplo:

html { font-size: 100%; } // Lembre-se! Esse valor é a base!
h1 { font-size: 2rem; } // O título é 100% maior que o tamanho base
.button { width: 50px; } // O tamanho do botão será constante

É recomendável usar rem para textos e margens externas entre elementos. Já para elementos da interface que não devem escalar (como imagens), as unidades px são mais adequadas.

Pixels vs. rem: Qual é a Diferença?

Por que px?

A conveniência de usar px está na sua confiabilidade: seu tamanho permanece inalterado.

• Se você precisa de controle absoluto sobre os tamanhos dos elementos, escolha px.
• Para clareza em imagens e bordas, px é a solução perfeita.
• Se você está trabalhando em um contexto de compatibilidade com navegadores mais antigos (olá, IE 😄), então px é sua escolha.

Por que rem?

rem é o símbolo da flexibilidade e uma abordagem moderna. Essas unidades estão ligadas ao tamanho da fonte do elemento raiz e são usadas nos seguintes casos:

• Acessibilidade: É definitivamente mais fácil para pessoas com deficiência visual ler texto em rem.
• Escalabilidade: Se você quer criar um site que se exiba lindamente em qualquer tela, use rem.
• Manutenção: Se você precisa mudar a interface, usar rem simplifica o processo de atualização.

Combinando px e rem: Harmonia no Mundo CSS

No mundo do CSS, há uma harmonia entre px e `rem — uma combinação de tradição e inovação que proporciona um equilíbrio entre estabilidade e flexibilidade:

.element {
  margin: 20px; /* para aqueles que preferem estabilidade */
  margin: 2.5rem; /* para aqueles que escolhem flexibilidade */
}

Alguns frameworks, como o Bootstrap 4, já reconhecem rem como o futuro dos layouts dinâmicos.

No entanto, fique atento a certos detalhes, como questões com o tamanho da fonte no Safari relacionado a media queries e rem. Esteja preparado para possíveis surpresas.

Visualização

Vamos considerar uma página da web como uma cidade:

px — esses são prédios 🏢, seus tamanhos são fixos e imutáveis. rem — esses são habitantes 🚶, que se adaptam à atmosfera geral da cidade.

**Adaptabilidade do `rem`:**

Em uma tela pequena 📱: A cidade é pequena, e os habitantes são pequenos.
Em uma tela grande 🖥️: A cidade é grande, e os habitantes, consequentemente, são grandes.

Estabilidade do px:

Independentemente do tamanho da tela: 🏢 = 🏢 = 🏢 (os prédios permanecem os mesmos)

## Ferramentas para Fazer a Escolha Certa

### Simplificando com Pré-processadores CSS

Pré-processadores modernos, como Sass ou Less, facilitam o trabalho com unidades `rem` e `px`. Defina variáveis ou mixins, e use media queries práticas para uma fácil conversão das unidades de medida:

```scss
$baseFontSize: 16px; // O valor padrão para todos

@mixin font-rem($size) {
  font-size: ($size * 1px); // Uma solução testada ao longo do tempo
  font-size: ($size / $baseFontSize) * 1rem; // Flexibilidade e modernidade
}

Escalonamento Dinâmico

Ao mudar o tamanho da fonte do elemento raiz, você controla o escalonamento de todo o site:

html { font-size: 125%; } // Tamanhos aumentados para conveniência

Considere os Usuários

Ao escolher unidades de medida, preste atenção ao conforto do usuário: configurações de escalonamento, tamanho de fonte preferido, etc. Escolher rem é uma escolha em prol do conforto do usuário.

Recursos Úteis

1. Valores e Unidades CSS - Aprenda Desenvolvimento Web | MDN
2. Unidades de Medida CSS
3. Fonte Responsiva e Fluida com Unidades vh e vw — Smashing Magazine
4. Entendendo e Usando Unidades rem em CSS — SitePoint
5. “rem” | Can I Use... Tabelas de referência para HTML5, CSS3 e mais
6. Módulo de Valores e Unidades CSS Nível 3
7. REM vs EM – O Confronto Eterno | Zell Liew

Video

Navigation