Guia de conversão de unidades CSS: px, rem, em, vw, vh explicados

Escolher a unidade CSS correta é uma das decisiones mais impactantes ao escrever hojas de estilo. A unidade que elijas determina como se escalan os elementos em diferentes tamanhos de tela, como responden a as preferências do usuário (como a configuração do tamanho de fuente do navegador) e cuán previsível se comporta tua layout. No entanto, muitos desenvolvedores usam píxeles por defecto por costumbre, perdiendo a flexibilidade e os beneficios de acessibilidade que oferecem as unidades relativas. Esta guia cobre todas as unidades CSS principais, explica quando usar cada uma, muestra como convertir entre elas e proporciona melhores práticas para o design responsive moderno.

Compreendendo as categorías de unidades CSS

As unidades CSS se dividen em dois categorías principais: unidades absolutas e unidades relativas. As unidades absolutas têm um tamanho físico fijo, enquanto que as unidades relativas derivan seu valor calculado de outro ponto de referencia. Compreender esta distinção é fundamental para tomar decisiones informadas sobre as unidades.

Unidades absolutas

As unidades absolutas são medidas de tamanho fijo. A unidade absoluta mais utilizada em desenvolvimento web é o píxel (px). Outras unidades absolutas incluem pontos (pt), centímetros (cm), milímetros (mm) e pulgadas (in). Estas unidades se utilizan principalmente para hojas de estilo de impressão o quando necessitas medidas que no cambien segundo o contexto. Em CSS basado em tela, px é a única unidade absoluta que usarás com frequência.

Unidades relativas

As unidades relativas calculan seu valor final baseando-se em um valor de referencia. em é relativo ao tamanho de fuente do elemento actual, rem é relativo ao tamanho de fuente do elemento raíz, vw e vh são relativos a as dimensiones do viewport, e os percentagens são relativos ao elemento pai. As unidades relativas são a piedra angular do design responsive e acessível porque permitem que tua layout se adapte automaticamente a diferentes contextos.

Píxeles (px): A unidade de referencia

O píxel é a unidade CSS mais intuitiva porque se asigna diretamente a os píxeles de a tela (com algumas consideraciones sobre a relação de píxeles do dispositivo). Os valores px siempre são iguais independientemente do contexto, lo que os faz previsíveis e fáciles de entender. No entanto, esta previsibilidade tem um costo: os tamanhos basados em píxeles no se escalan quando os usuarios mudam o tamanho de fuente predeterminado do navegador, lo que crea problemas de acessibilidade.

Quando usar px

• Largo de borde: Os bordes de 1px devem permanecer de 1px independientemente de a configuração do tamanho de fuente.
• Box-shadow: Os desplazamientos de sombra e radios de desenfoque suelen ser melhores em píxeles para obter efectos visuales consistentes.
• Detalhes finos: Qualquer valor cujo escalado arruinaria o design visual, como separadores de linha fina o posicionamiento preciso de iconos.
• Tamanho de fuente raíz: Estabelecer html { font-size: 16px; } como linha base é um patrón comum, embora deves respetar os valores predeterminados do navegador do usuário.

Quando evitar px

Evita usar px para tamanhos de fuente, padding, margin e dimensiones de layout que deveriam adaptarse a as preferências do usuário. Os usuarios que aumentan o tamanho de fuente do navegador a 20px esperan que todo o texto se escale em consequência, mas os tamanhos de fuente basados em px no responden a este mudo.

rem: Tamanho relativo a a raíz

). Na maioria dois navegadores, o tamanho de fuente raíz predeterminado é 16px, pelo que 1rem = 16px, 0.5rem = 8px, 2rem = 32px. A vantagem clave de rem é que se escala quando os usuarios mudam o tamanho de fuente predeterminado do navegador, tornando-o a melhor opção para a acessibilidade.

Convertir px a rem

A fórmula de conversão é simple: divide o valor em píxeles por o tamanho de fuente raíz.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

O truco do 62.5%

Muitos desenvolvedores encontram tediosa a matemática de dividir por 16. Um truco popular é estabelecer o tamanho de fuente raíz ao 62.5%, fazendo que 1rem seja igual a 10px. Isto simplifica o cálculo mental: 14px se converte em 1.4rem, 24px em 2.4rem, e así sucesivamente.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: Tamanho relativo ao contexto

A unidade em é relativa ao tamanho de fuente do elemento actual (o para propriedades distintas de font-size, relativa a seu elemento pai). Isto significa que 1em é igual ao tamanho de fuente actual, e os valores em se componen quando os elementos estão anidados. Este comportamento de composição pode ser tanto poderoso como confuso.

O problema de a composição

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Cada elemento anidado multiplica o tamanho de fuente, lo que leva a um crecimiento exponencial. Por isso rem é generalmente preferivel para tamanhos de fuente. No entanto, em destaca em casos de uso específicos onde queres escalado a nivel de componente.

Quando usar em

• Padding e margin de componentes: Quando queres que o espaçamento se escale com o tamanho de fuente do componente, em mantém todo proporcional. Se aumentas o tamanho de fuente de um botão, seu padding se escala automaticamente.
• Breakpoints de media queries: Alguns desenvolvedores preferem breakpoints basados em em porque se escalan com as preferências de tamanho de fuente do usuário, asegurando que o layout se adapte ao largo de conteúdo apropriado.
• Tamanho de iconos em componentes: Os iconos dimensionados em em se escalan proporcionalmente com o texto circundante.

Unidades de viewport: vw, vh, vmin, vmax

As unidades de viewport são relativas a as dimensiones de a janela do navegador. 1vw equivale ao 1% do largo do viewport, 1vh equivale ao 1% de a altura do viewport. vmin é o menor entre vw e vh, vmax é o mayor. Estas unidades são essenciais para criar layouts que respondan ao espaço de tela disponivel.

Casos de uso comuns de unidades de viewport

O problema de vh em móveis

Em navegadores móveis, 100vh no siempre equivale a a altura visível do viewport. A barra de direcciones e os controles de navegação do navegador ocupan espaço, mas 100vh inclui o área atrás de estes controles. Isto faz que o conteúdo na parte inferior das secciones a altura completa quede recortado. O CSS moderno proporciona dvh (altura de viewport dinámica) como solução, que tem em cuenta as barras de ferramentas dinámicas. Alternativamente, usa JavaScript para estabelecer uma propriedade personalizada CSS basada em window.innerHeight.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

Novas unidades de viewport: svh, lvh, dvh

CSS introdujo três novas unidades de altura de viewport para resolver o problema do viewport em móveis:

• svh (altura de viewport pequeno): A altura do viewport quando toda a UI do navegador é visível (barra de direcciones expandida).
• lvh (altura de viewport grande): A altura do viewport quando a UI do navegador está minimizada (barra de direcciones colapsada).
• dvh (altura de viewport dinámica): A altura actual do viewport, que muda a medida que a UI do navegador se expande o colapsa.

As mesmas variantes pequeno/grande/dinámico existem para o largo (svw, lvw, dvw) e as unidades mín/máx (svmin, lvmin, dvmin, etc.). Usa dvh para layouts de tela completa em móveis, svh quando necesites garantizar que o conteúdo seja visível sem scroll, e lvh quando quieras preencher o máximo espaço possível.

Tipografia fluida com clamp()

A função CSS clamp() é um mudo de juego para a tipografia responsive. Acepta três valores: um valor mínimo, um valor preferido e um valor máximo. O navegador escolhe o valor preferido mas lo restringe entre o mínimo e o máximo.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

Este abordagem te da os beneficios do escalado basado em viewport sem o riesgo de que o texto se vuelva demasiado pequeno em móveis o demasiado grande em desktop. Elimina a necessidade de breakpoints de media queries para tamanhos de fuente, reduciendo significativamente a complexidade do CSS.

Tabla de referencia de conversão

Usa esta tabla como referencia rápida para conversões comuns. Todos os valores asumen um tamanho de fuente raíz de 16px e um viewport de 1920x1080.

Melhores práticas de unidades CSS

• Usa rem para tamanhos de fuente: Esta é a regra mais importante. Os tamanhos de fuente basados em rem respetan as preferências do usuário e se escalan consistentemente em toda a aplicação.
• Usa em para espaçamento de componentes: O padding e margin dentro dois componentes se benefician de em porque se escalan proporcionalmente quando muda o tamanho de fuente do componente.
• Usa px para bordes e detalhes finos: Os valores que no devem escalar com o tamanho de fuente (como bordes de 1px e desplazamientos de sombra) devem usar píxeles.
• Usa percentagens para largos de layout: Os layouts fluidos usam largos de columnas e contêineres basados em percentagens, permitindo que o conteúdo se recomponga em diferentes tamanhos de tela.
• Usa unidades de viewport para elementos de tela completa: As secciones hero, superposiciones e qualquer elemento que deba preencher o viewport se benefician de vh e vw.
• Usa clamp() para tipografia fluida: Reemplaza os breakpoints de media queries para tamanhos de fuente com clamp(), creando um escalado suave entre valores mínimo e máximo.
• Nunca establezcas o font-size raíz em px: Usa siempre percentagens (como 62.5%) o mantén o valor predeterminado do navegador. Establecerlo em píxeles anula as preferências de acessibilidade do usuário.
• Sei consistente: Escolhe uma estrategia de unidades para tua projeto e manténla. Misturar unidades aleatoriamente faz que o código seja mais difícil de manter e depurar.