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 pones html { font-size: 62.5% }, obtienes 10 px por rem y un cálculo mental más sencillo, 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. El porcentaje en anchos o márgenes se basa, en cambio, en el bloque contenedor y no se convierte aquí.
Rem es la opción habitual para tamaños de fuente y espaciados, porque así la página respeta el tamaño que el visitante ha elegido en el navegador. Usar px en tamaños de fuente no impide el zoom, pero ignora ese ajuste, algo que tratan 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 móviles, 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 rara vez 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 como máximo cuatro decimales, tal como exige CSS.