Convierte PX a REM y REM a PX al instante con tamaño base personalizable. Genera tipografía fluida con clamp() en CSS, clases de Tailwind y tablas de conversión.
Convierte PX a REM y REM a PX al instante con tamaños de fuente raíz personalizados. Genera tipografía fluida con CSS clamp(), clases de Tailwind y tablas de conversión.
Longitud exacta en coordenadas de pantalla en píxeles de referencia CSS (1px = 1/96 de pulgada). Se utiliza como ancla del diseño en Figma, Sketch o Adobe XD antes de la conversión a unidades relativas.
El valor computado de font-size del elemento raíz <html> del documento. Los estándares del W3C establecen este valor en 16px por defecto en navegadores móviles y de escritorio, fijando 1.000rem = 16px.
Longitud proporcional calculada dividiendo los píxeles objetivo entre la base raíz. Escala de forma dinámica con el zoom del navegador y los ajustes de accesibilidad de aumento de texto del sistema operativo.
Intervalo de ancho de pantalla (típicamente de 375px en móviles a 1440px en escritorio) en el que la tipografía fluida escala proporcionalmente antes de fijarse en los umbrales mínimo y máximo de clamp().
Cantidad de dígitos fraccionarios conservados en la cadena rem convertida. Mantener 4 decimales (por ejemplo, 0.0625rem para 1px con base de 16px) garantiza cero recortes por redondeo subpíxel en pantallas de alta densidad (HiDPI).
El token de espaciado o tamaño tipográfico correspondiente de Tailwind CSS v3/v4 equivalente al valor rem calculado, basado en los incrementos estándar de 0.25rem (4px) de Tailwind.
Definir font-size en píxeles (por ejemplo, font-size: 16px) anula el tamaño de fuente configurado por usuarios con discapacidad visual en las preferencias de su navegador. Los navegadores modernos solo respetan el escalado del usuario cuando el texto se declara en unidades rem o em. Si un usuario con baja visión aumenta la fuente predeterminada de su navegador de 16px a 24px, los diseños basados en rem se expanden proporcionalmente, mientras que la tipografía bloqueada en px permanece congelada en el valor fijo del diseño, incumpliendo el criterio de conformidad 1.4.4 (Cambio de tamaño del texto) de las pautas WCAG 2.1.
Muchos desarrolladores declaran html { font-size: 62.5% } para que 1rem equivalga convenientemente a 10px (16px * 0.625 = 10px). Sin embargo, las librerías de componentes de terceros (como Radix, Shadcn o plugins de Tailwind) calibran sus tokens de espaciado asumiendo una raíz de 16px. Aplicar un reinicio al 62.5% encogerá los componentes de interfaz no adaptados al 62.5% de su tamaño previsto, provocando colapso de rellenos (padding), botones con iconos desalineados y sistemas de espaciado fragmentados en arquitecturas de microfrontends modernas.
Mientras que 1rem siempre equivale al tamaño de fuente de la raíz del documento con independencia de la profundidad en el DOM, 1em equivale al font-size del elemento padre inmediato. Si anidas tres listas desordenadas con font-size: 0.875em, el primer nivel se renderiza a 14px (16 * 0.875), el segundo cae a 12.25px (14 * 0.875) y el tercero se reduce a 10.7px (12.25 * 0.875). Reserva em estrictamente para paddings y bordes internos de componentes que deban escalar proporcionalmente cuando cambie el tamaño de fuente de dicho componente específico.
Convertir un borde de 1px a 0.0625rem (1 / 16) provoca que los motores de renderizado calculen píxeles de dispositivo fraccionarios en pantallas con densidades de píxeles no enteras (como 1.25x o 2.75x en dispositivos Android). Con ciertos niveles de zoom o densidades, 0.0625rem se redondea hacia abajo a 0 píxeles físicos, haciendo que bordes de tablas y contornos de botones desaparezcan por completo. Mantén siempre los bordes ultrafinos y separadores explícitamente en 1px (o border-width: 1px) en lugar de convertirlos a rem.
Esto ocurre cuando el ancho de viewport mínimo se define mayor que el máximo, o cuando el tamaño de fuente mínimo supera al máximo. Unos valores de entrada invertidos generan una pendiente negativa ((minFont - maxFont) / deltaVw), lo que provoca que el texto se encoja a medida que la pantalla se agranda. Para solucionarlo, implementa una validación estricta que garantice que minViewport < maxViewport y minFontSize <= maxFontSize antes de calcular la ecuación de interpolación lineal.
La especificación W3C CSS Media Queries Level 4 estipula que las unidades relativas en media queries (@media (min-width: 40rem)) siempre se resuelven contra el tamaño de fuente inicial predeterminado del navegador (16px), ignorando por completo cualquier font-size declarado en el elemento html (como 62.5% o 10px). Una regla @media (min-width: 40rem) siempre se activará a los 640px (40 * 16px), nunca a 400px (40 * 10px). Escribe los valores rem de tus media queries calibrados exclusivamente con respecto al estándar de 16px.
Declarar clases arbitrarias en Tailwind como text-[0.9375rem] (15px) o h-[2.1875rem] (35px) puede originar discrepancias de redondeo de 0.5px entre Chromium (Blink) y Safari (WebKit), generando huecos de 1px no deseados en contenedores flex. Resuélvelo ciñéndote a los incrementos estándar de 4px de Tailwind (por ejemplo, text-sm para 14px o text-base para 16px) o aplicando box-sizing: border-box junto con flex-shrink: 0 en los límites del contenedor.
Para convertir píxeles (PX) a REM en CSS, divide tu valor objetivo en píxeles entre el tamaño de fuente raíz (que es 16px por defecto en todos los navegadores modernos): REM = PX / BasePX. Por ejemplo, 24px dividido entre 16px equivale a 1.5rem (24 / 16 = 1.5). A la inversa, para convertir de REM a PX, multiplica el valor en REM por la base: PX = REM * BasePX (1.5rem * 16 = 24px).
16px equivale exactamente a 1.000rem bajo el tamaño de fuente raíz estándar de 16px establecido por el W3C para navegadores. Como 16 dividido entre 16 es igual a 1, 1rem representa el tamaño de fuente base para el cuerpo de texto, elementos de párrafo e inputs de formularios por defecto en el desarrollo web estándar.
Se debe usar REM en lugar de PX porque REM respeta la configuración de accesibilidad del usuario: cuando las personas con dificultades visuales aumentan el tamaño de fuente predeterminado de su navegador, toda la tipografía y los espaciados basados en REM escalan proporcionalmente, preservando la integridad del diseño. Por el contrario, los valores bloqueados en PX fijan el texto a un tamaño estático, incumpliendo el criterio de accesibilidad WCAG 1.4.4 y provocando textos truncados o interfaces ilegibles.
Para calcular CSS clamp(), determina tu tamaño de fuente mínimo (por ejemplo, 16px en un viewport de 375px) y el máximo (por ejemplo, 24px en un viewport de 1440px). La pendiente lineal es (24 - 16) / (1440 - 375) = 8 / 1065 ≈ 0.007512. El punto de corte con el eje Y (intercepto) es -375 * 0.007512 + 16 ≈ 13.183px (0.8239rem). El valor preferido es 0.8239rem + 0.7512vw, lo que produce la regla en producción: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem).
La diferencia entre REM y EM radica en su punto de referencia: REM (Root EM) siempre es relativo al tamaño de fuente del elemento raíz <html> (16px por defecto), mientras que EM es relativo al font-size de su elemento padre directo. Las unidades EM anidadas se multiplican exponencialmente en cascada a lo largo del árbol DOM (por ejemplo, 0.8em dentro de 0.8em resulta en 0.64em), mientras que los valores REM permanecen predecibles en cualquier nivel de anidamiento de componentes.
Convertir un borde de 1px a 0.0625rem causa problemas de redondeo subpíxel en pantallas móviles con proporciones de píxeles de dispositivo (DPR) no enteras (como 2.625x). En muchos ciclos de renderizado de WebKit móvil, 0.0625rem se redondea a 0 píxeles físicos, haciendo desaparecer por completo contornos de botones y divisores de tarjetas. Para bordes ultrafinos y líneas de separación, mantén siempre su definición explícita en 1px en lugar de REM.
Comprueba códigos de estado HTTP, analiza cadenas de redirección e inspecciona cabeceras de respuesta. Diagnostica errores de 1xx a 5xx, normas RFC, impacto en SEO y soluciones.
Prueba, depura y optimiza expresiones regulares en tiempo real. Inspecciona coincidencias de patrones, grupos de captura, desglose de tokens y sintaxis de sustitución.
Calcule máscaras de subred IPv4, rangos de red CIDR, direcciones de host utilizables e IP de broadcast. Incluye inspección binaria bit a bit, planificación VLSM y reglas de VPC en la nube.
Calcula sumas y restas binarias con acarreos paso a paso, complemento a dos con signo, compuertas lógicas y conversión a hexadecimal en tiempo real.
Pruebe y valide la sintaxis de robots.txt conforme a RFC 9309. Verifique permisos de rastreo por User-Agent, depure rutas Disallow e inspeccione sitemaps en el navegador.
Convierte Markdown en código HTML limpio y listo para producción en tiempo real. Incluye tablas GFM, resaltado de sintaxis, saneamiento XSS, copia de texto enriquecido y exportación completa.