Usa el Convertir Unidades CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por Qué las Unidades CSS Causan Tantas Sorpresas en el Diseño
CSS ofrece muchas formas de expresar un tamaño: pÃxeles, rem, em, porcentajes, unidades de ventana, puntos y unidades fÃsicas como los centÃmetros. Cada una significa algo distinto, y cada una cambia cuando cambia otra cosa. Un rem sigue el tamaño de fuente raÃz, un em sigue el tamaño de fuente de su elemento padre, un porcentaje sigue a su contexto, y una unidad de ventana sigue al tamaño de la ventana del navegador. Mezclarlas sin convertir es la forma en que el texto termina demasiado pequeño en una pantalla y demasiado grande en otra.
Este conversor convierte un valor a todas las unidades comunes a la vez, usando el tamaño raÃz, el tamaño de contexto y el tamaño de ventana que tú defines. Eso importa porque no hay una única respuesta fija a una pregunta como cuánto es 2rem en pÃxeles: con una raÃz de 16 pÃxeles son 32 pÃxeles, pero con una raÃz de 20 pÃxeles son 40. Al definir primero tus valores reales del proyecto, obtienes respuestas que coinciden con tu sitio en lugar de respuestas para un valor por defecto que quizá no se aplique a ti.
Cómo Usarlo
Escribe un valor, elige la unidad en la que está escrito, y ajusta el tamaño de fuente raÃz, el tamaño de contexto y el tamaño de ventana para que coincidan con tu proyecto. Pulsa Convertir y la herramienta muestra el equivalente en cada unidad, con el valor en pÃxeles destacado arriba.
- Escribe el número que quieres convertir, por ejemplo 1.5.
- Elige la unidad en la que está escrito ahora, como rem, em, vw o pt.
- Ajusta el tamaño de fuente raÃz. El valor por defecto es 16 pÃxeles, el habitual en los navegadores.
- Ajusta el tamaño de fuente de contexto si vas a convertir valores em o porcentajes.
- Ajusta el ancho y alto de ventana si vas a convertir valores vw o vh.
- Pulsa Convertir y lee la tabla completa de equivalencias.
Un Ejemplo Práctico
Imagina que un diseñador te entrega un espaciado de 1.5rem y tu tamaño de fuente raÃz es de 16 pÃxeles. El conversor muestra 24 pÃxeles, fáciles de comprobar con un diseño medido en pÃxeles. Cambia la raÃz a 20 pÃxeles y el mismo 1.5rem se convierte en 30 pÃxeles, lo que muestra por qué un sitio que permite cambiar el tamaño base no puede medirse solo con pÃxeles fijos. La misma idea funciona al revés: un espacio de 50vw en una ventana de 1280 pÃxeles de ancho son 640 pÃxeles, pero en un teléfono de 375 pÃxeles son solo unos 188 pÃxeles.
Consejos Que Ahorran Tiempo
- Usa rem para la mayorÃa de espaciados y tamaños de texto, porque escala con la raÃz y respeta la configuración del usuario.
- Usa em cuando un tamaño debe escalar con su propio elemento, por ejemplo el relleno dentro de un botón que crece con su texto.
- Usa vw y vh con moderación para secciones a pantalla completa y tÃtulos grandes, y comprueba siempre el resultado en un teléfono pequeño.
- Recuerda que el punto es una unidad de impresión: 72 puntos equivalen a 96 pÃxeles en pantalla, asà que los puntos se ven más grandes de lo que muchos esperan.
- Convierte antes de escribir un valor fijo, no después de que el diseño se rompa, y ten el conversor abierto mientras revisas un archivo de diseño.
Errores Comunes Que Debes Evitar
El error más común es convertir con el tamaño raÃz equivocado, normalmente suponiendo 16 pÃxeles cuando el proyecto en realidad usa 10 o 20. Otro es tratar em y rem como si fueran lo mismo: un em dentro de un elemento anidado se acumula con cada padre, mientras que un rem siempre vuelve a la raÃz. Un tercero es usar unidades de ventana para el texto del cuerpo sin un lÃmite, lo que hace el texto ilegible en teléfonos y enorme en monitores anchos. Revisa los tres ajustes antes de confiar en un número.
Preguntas Frecuentes
¿Cuál es la diferencia entre rem y em? Un rem siempre es relativo al tamaño de fuente del elemento raÃz, mientras que un em es relativo al tamaño de fuente del elemento en el que se encuentra, asà que los valores em pueden acumularse al anidar elementos.
¿Por qué debo ajustar el tamaño de ventana? Las unidades de ventana son porcentajes de la ventana del navegador, asà que 10vw es un número distinto de pÃxeles en un teléfono y en un monitor de escritorio. El conversor necesita tu tamaño de ventana para dar una respuesta real en pÃxeles.
Los tamaños dejan de ser una adivinanza cuando los conviertes con tus ajustes reales. Escribe tu valor, define tus tamaños, y usa la tabla para elegir la unidad que se comporte como tu diseño necesita.
Pingback: CSS Unit Converter - Convert px, rem, em and vw Free Online