Unidades CSS
Escribe un valor y elige la unidad para ver el mismo tamaño en todas las unidades CSS, listo para copiar.
El mismo tamaño en otras unidades
- 1.5remtamaño de fuente raíz
- 1.5emtamaño de fuente del elemento padre
- 150%porcentaje del tamaño de fuente del elemento padre
- 18ptpuntos
- 1.5pcpicas
- 0.25inpulgadas
- 0.635cmcentímetros
- 6.35mmmilímetros
- 25.4Qcuartos de milímetro
- 1.6667vwporcentaje del ancho del viewport
- 2.6667vhporcentaje del alto del viewport
- 2.6667vminporcentaje del lado más corto del viewport
- 1.6667vmaxporcentaje del lado más largo del viewport
Contexto
Px a rem con 16 px
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
Un punto equivale a 1.333 px, ya que una pulgada son 96 px y 72 pt. A la inversa, un píxel son 0.75 pt.
Cómo funciona
Rem se basa en el tamaño de fuente del elemento html, que es de 16 px en todos los navegadores si nadie lo cambia. Así, 24 px son 1.5 rem. Si defines html { font-size: 62.5% }, obtienes 10 px por rem y cuentas mentales más fáciles, pero también cambias todo lo que depende del tamaño predeterminado.
Em se basa en el tamaño de fuente del elemento padre y, por eso, se acumula cuando hay elementos anidados: 1.2 em dentro de 1.2 em es 1.44 veces más grande. El porcentaje en font-size funciona igual, con 100 % equivalente a 1 em. En cambio, el porcentaje en anchos o márgenes se basa en el bloque contenedor y no se convierte aquí.
Rem es la opción más común para tamaños de fuente y espaciados, porque así la página respeta el tamaño que el visitante eligió en el navegador. Usar px en tamaños de fuente no impide el zoom, pero ignora esa configuración, algo que abordan las pautas WCAG sobre el cambio de tamaño del texto.
Vw y vh equivalen al uno por ciento del ancho y el alto del viewport, y vmin y vmax, al uno por ciento de su lado más corto y más largo. Los valores dependen por completo de la ventana, así que el botón toma el tamaño de la ventana que estás usando ahora. En celulares, vh puede cambiar cuando aparece la barra de direcciones; dvh, svh y lvh lo resuelven.
Pt, pc, in, cm, mm y Q son unidades absolutas con proporciones fijas en CSS: una pulgada son 96 px, 72 pt y 2.54 cm. En pantalla casi nunca equivalen a centímetros reales, porque un píxel CSS no es un píxel físico. Son más útiles en hojas de estilo para impresión.
Los valores se escriben con punto decimal y máximo cuatro decimales, como lo exige CSS.