{"id":5185,"date":"2026-10-14T20:46:56","date_gmt":"2026-10-14T17:46:56","guid":{"rendered":"https:\/\/wpcalc.com\/es\/conversores\/conversor-unidades-css\/"},"modified":"2026-10-14T20:46:56","modified_gmt":"2026-10-14T17:46:56","slug":"conversor-unidades-css","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/es\/conversores\/conversor-unidades-css\/","title":{"rendered":"Conversor de unidades CSS"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">Convierte entre px, rem, em, vw y vh<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"5185\" data-favorite-title=\"Unidades CSS\" data-favorite-url=\"https:\/\/wpcalc.com\/es\/conversores\/conversor-unidades-css\/\" data-favorite-excerpt=\"Convierte una longitud CSS entre px, rem, em, vw, vh, pt y porcentaje. Introduce el valor, elige su unidad, ajusta el tama\u00f1o de fuente del elemento ra\u00edz y del padre junto con las dimensiones de la ventana, y obt\u00e9n todos los equivalentes de una sola vez.\" aria-label=\"A\u00f1adir a favoritos\" data-favorite-icon=\"icon icon-other\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/es\/conversores\/conversor-unidades-css\/\" method=\"POST\" class=\"calculator\" id=\"calculator-5185\" data-post=\"5185\"><fieldset class=\"fieldset-input is-1\"><legend class=\"sr-only\">Campos de entrada<\/legend><div class=\"field has-term\" id=\"input-1\"><label for=\"field-1\">Valor<\/label><div class=\"term\">v<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"number\" name=\"valor\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"e.g. 24\" step=\"any\" value=\"24\"\/><small id=\"calc-info-1\">La longitud que quieres convertir. Se permiten valores negativos (por ejemplo, m\u00e1rgenes negativos).<\/small><\/div><div class=\"field\" id=\"input-2\"><label for=\"field-2\">Unidad CSS<\/label><div class=\"grid grid-cols-1\"><select id=\"field-2\" name=\"unidad_css\"><option value=\"px\" selected>px (p\u00edxeles)<\/option><option value=\"rem\">rem (em de ra\u00edz)<\/option><option value=\"em\">em (relativo al tama\u00f1o de fuente del padre)<\/option><option value=\"vw\">vw (ancho de la ventana)<\/option><option value=\"vh\">vh (alto de la ventana)<\/option><option value=\"pt\">pt (puntos)<\/option><option value=\"%\">% (porcentaje del tama\u00f1o de fuente del padre)<\/option><\/select><svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n              <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" \/>\n            <\/svg><\/div><\/div><div class=\"field has-term\" id=\"input-3\"><label for=\"field-3\">Tama\u00f1o de fuente ra\u00edz<\/label><div class=\"term\">rem<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"tamao_de_fuente_raz\" id=\"field-3\" aria-describedby=\"calc-unit-3 calc-info-3\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-3\">px<\/div><small id=\"calc-info-3\">Tama\u00f1o de fuente del elemento &lt;html&gt;. Los navegadores usan 16px por defecto; necesario para rem.<\/small><\/div><div class=\"field has-term\" id=\"input-4\"><label for=\"field-4\">Tama\u00f1o de fuente del padre<\/label><div class=\"term\">em<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"tamao_de_fuente_del_padre\" id=\"field-4\" aria-describedby=\"calc-unit-4 calc-info-4\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-4\">px<\/div><small id=\"calc-info-4\">Tama\u00f1o de fuente calculado del elemento padre; necesario para em y %.<\/small><\/div><div class=\"field has-term\" id=\"input-5\"><label for=\"field-5\">Ancho de la ventana<\/label><div class=\"term\">vw<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"ancho_de_la_ventana\" id=\"field-5\" aria-describedby=\"calc-unit-5 calc-info-5\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1920\" min=\"1\" value=\"1920\"\/><div class=\"unit\" id=\"calc-unit-5\">px<\/div><small id=\"calc-info-5\">Ancho de la ventana del navegador; necesario para vw.<\/small><\/div><div class=\"field has-term\" id=\"input-6\"><label for=\"field-6\">Alto de la ventana<\/label><div class=\"term\">vh<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"alto_de_la_ventana\" id=\"field-6\" aria-describedby=\"calc-unit-6 calc-info-6\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1080\" min=\"1\" value=\"1080\"\/><div class=\"unit\" id=\"calc-unit-6\">px<\/div><small id=\"calc-info-6\">Alto de la ventana del navegador; necesario para vh.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Recalcular\" id=\"calculate-button\" data-post=\"5185\">Calcular<\/button><button type=\"reset\">Restablecer<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Calcular autom\u00e1ticamente<\/label><small>Si est\u00e1 activado, el resultado se actualizar\u00e1 autom\u00e1ticamente al cambiar cualquier valor.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> Valores convertidos<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>P\u00edxeles<\/span><span class=\"result-term\">px<\/span><\/span><span class=\"field-value\" id=\"result-1\" data-unit=\"px\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>Ems de ra\u00edz<\/span><span class=\"result-term\">rem<\/span><\/span><span class=\"field-value\" id=\"result-2\" data-unit=\"rem\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>Ems (elemento padre)<\/span><span class=\"result-term\">em<\/span><\/span><span class=\"field-value\" id=\"result-3\" data-unit=\"em\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>Unidades de ancho de la ventana<\/span><span class=\"result-term\">vw<\/span><\/span><span class=\"field-value\" id=\"result-4\" data-unit=\"vw\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>Unidades de alto de la ventana<\/span><span class=\"result-term\">vh<\/span><\/span><span class=\"field-value\" id=\"result-5\" data-unit=\"vh\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>Puntos<\/span><span class=\"result-term\">pt<\/span><\/span><span class=\"field-value\" id=\"result-6\" data-unit=\"pt\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result is-column\" id=\"output-7\"><span class=\"field-title\"><span>Base de la conversi\u00f3n<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">Copiar enlace a este c\u00e1lculo<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>Dejar un comentario<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"5185\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">\u00bfQu\u00e9 te ha parecido este resultado?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">Me gusta <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">\u00datil <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">Confuso <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">Decepcionado <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">Inexacto <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>F\u00f3rmula de las unidades CSS<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">F\u00f3rmula<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[ px = v \\times f(\\text{unidad}) \\]\n\\[ x_{\\text{destino}} = \\frac{px}{f(\\text{unidad destino})} \\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>Donde:<\/strong><\/p>\n<ul>\n<li>\\(v\\) \u2014 la longitud que has introducido, en su unidad original<\/li>\n<li>\\(f(\\text{unidad})\\) \u2014 cu\u00e1ntos p\u00edxeles vale una unidad de ese tipo:<\/li>\n<li>\\(px\\): 1 &nbsp;\\(rem\\): tama\u00f1o de fuente del ra\u00edz &nbsp;\\(em\\): tama\u00f1o de fuente del padre &nbsp;\\(vw\\): ancho de la ventana \\(\/ 100\\) &nbsp;\\(vh\\): alto de la ventana \\(\/ 100\\) &nbsp;\\(pt\\): \\(96\/72 = 1.3333\\) &nbsp;\\(%\\): tama\u00f1o de fuente del padre \\(\/ 100\\)<\/li>\n<\/ul>\n<p>La calculadora convierte primero el valor introducido a p\u00edxeles y luego lo divide por el factor en p\u00edxeles de cada unidad de destino. Este procedimiento en dos pasos garantiza que los siete resultados sean coherentes entre s\u00ed.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-2\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>Unidades CSS \u2013 Ejemplo de c\u00e1lculo<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Ejemplo:<\/strong> convierte <code>24px<\/code> a rem, em, vw, vh y pt, con un tama\u00f1o de fuente de la ra\u00edz y del padre de 16px y una ventana de 1920\u00d71080 (los valores que trae la calculadora por defecto).<\/p>\n<p>\\[ px = 24 \\times 1 = 24 \\]<\/p>\n<p>\\[ rem = \\frac{24}{16} = 1.5 \\quad em = \\frac{24}{16} = 1.5 \\]<\/p>\n<p>\\[ vw = \\frac{24}{1920\/100} = \\frac{24}{19.2} = 1.25 \\quad vh = \\frac{24}{1080\/100} \\approx 2.2222 \\]<\/p>\n<p>\\[ pt = 24 \\times \\frac{72}{96} = 18 \\]<\/p>\n<p><strong>Resultado:<\/strong> 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.<\/p>\n<p>\n\r\n<\/section>\n<h2>C\u00f3mo usar el conversor de unidades CSS<\/h2>\n<ol>\n<li>Introduce la longitud en el campo <strong>Valor<\/strong> \u2014 por ejemplo, 24. Tambi\u00e9n funcionan los valores negativos, lo que resulta \u00fatil para m\u00e1rgenes negativos.<\/li>\n<li>Selecciona la unidad de ese valor en el desplegable <strong>Unidad CSS<\/strong> (px, rem, em, vw, vh, pt o %).<\/li>\n<li>Ajusta el <strong>tama\u00f1o de fuente de la ra\u00edz<\/strong>: el tama\u00f1o de fuente del elemento <code>&lt;html&gt;<\/code>. Los navegadores utilizan 16px por defecto.<\/li>\n<li>Ajusta el <strong>tama\u00f1o de fuente del padre<\/strong>: el tama\u00f1o de fuente calculado del elemento padre, necesario para las conversiones a em y %.<\/li>\n<li>Introduce el <strong>ancho<\/strong> y el <strong>alto de la ventana<\/strong> del navegador en p\u00edxeles; estos valores determinan los resultados en vw y vh.<\/li>\n<li>Lee todos los equivalentes a la vez en <strong>Valores convertidos<\/strong>, junto con la base de conversi\u00f3n, que muestra a cu\u00e1ntos p\u00edxeles equivale cada unidad en tu configuraci\u00f3n.<\/li>\n<\/ol>\n<h2>Qu\u00e9 son las unidades CSS y por qu\u00e9 importan<\/h2>\n<p>Las longitudes en CSS se dividen en dos familias. Las unidades <em>absolutas<\/em>, como px y pt, tienen un tama\u00f1o fijo: la especificaci\u00f3n de CSS define el p\u00edxel de referencia de modo que 1in = 96px = 72pt. Las unidades <em>relativas<\/em> dependen del contexto: rem remite al tama\u00f1o de fuente del elemento ra\u00edz, em al del padre, vw y vh al 1 % del ancho o del alto de la ventana, y % (en font-size) al tama\u00f1o de fuente del padre.<\/p>\n<p>La unidad que elijas condiciona el comportamiento del dise\u00f1o. Los valores en px se mantienen constantes al margen de las preferencias del usuario, lo que los hace predecibles para bordes o detalles finos, pero r\u00edgidos para la tipograf\u00eda. Los valores en rem escalan con el tama\u00f1o de fuente de la ra\u00edz: si un usuario agranda el texto base del navegador, todo lo medido en rem crece proporcionalmente, un requisito clave de accesibilidad. Los valores en em se acumulan a trav\u00e9s de elementos anidados, lo que puede dar resultados sorprendentes en estructuras profundas.<\/p>\n<p>Las unidades de ventana hacen que la tipograf\u00eda y el espaciado reaccionen al tama\u00f1o de la ventana. Un ancho fijado en <code>50vw<\/code> ocupa siempre la mitad de la pantalla, por eso las secciones destacadas y la tipograf\u00eda fluida suelen combinar vw con rem mediante <code>clamp()<\/code>. Como vw y vh cambian con cada redimensionado, convertirlos a px solo tiene sentido para un tama\u00f1o de ventana concreto: el que introduzcas en la calculadora.<\/p>\n<p>Interpretar el resultado es sencillo: cada valor es la misma longitud f\u00edsica expresada en otra unidad. Si est\u00e1s migrando un sistema de dise\u00f1o de px a rem, la columna de rem te indica el valor del token que debes escribir; si vas a imprimir o comparar con herramientas de dise\u00f1o que trabajan en puntos, la columna de pt te da el equivalente directo.<\/p>\n<h2>Supuestos, limitaciones y consejos pr\u00e1cticos<\/h2>\n<ul>\n<li>El conversor asume el p\u00edxel de referencia est\u00e1ndar de CSS: <code>1in = 96px = 72pt<\/code>. La salida f\u00edsica (impresa) puede variar ligeramente seg\u00fan el dispositivo.<\/li>\n<li>El porcentaje se interpreta como relativo al tama\u00f1o de fuente del padre, lo cual es correcto para <code>font-size<\/code>. En <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> y <code>padding<\/code>, el porcentaje se refiere a las dimensiones del padre, as\u00ed que esos casos requieren otro valor de referencia.<\/li>\n<li>em es relativo al tama\u00f1o de fuente <em>del padre<\/em>. Cuando se usa en una propiedad como <code>line-height<\/code> o <code>padding<\/code> del propio elemento, em remite al tama\u00f1o de fuente de ese elemento: ajusta el campo \u00abTama\u00f1o de fuente del padre\u00bb en consecuencia.<\/li>\n<li>Los resultados en vw y vh solo son v\u00e1lidos para las dimensiones de ventana que hayas introducido. Prueba varios tama\u00f1os (p. ej., 1920\u00d71080, 1366\u00d7768, 390\u00d7844) para ver c\u00f3mo cambian los valores convertidos.<\/li>\n<li>Algunas configuraciones de navegador aplican un tama\u00f1o de fuente m\u00ednimo, lo que puede hacer que un texto muy peque\u00f1o basado en rem o em se muestre m\u00e1s grande de lo que predice el c\u00e1lculo.<\/li>\n<li>Una regla pr\u00e1ctica muy \u00fatil: con el tama\u00f1o de fuente de la ra\u00edz por defecto de 16px, 1rem = 16px, es decir, <em>px \u00f7 16 = rem<\/em>. Si cambias la ra\u00edz a 10px, los valores en rem equivalen a px \u00f7 10, y por eso muchos sistemas de dise\u00f1o usan una ra\u00edz de 10px.<\/li>\n<\/ul>\n<p>Si adem\u00e1s necesitas convertir unidades de medida o de ingenier\u00eda, prueba nuestro <a href=\"https:\/\/wpcalc.com\/en\/converters\/power-unit-converter\/\">conversor de unidades de potencia<\/a>, el <a href=\"https:\/\/wpcalc.com\/es\/conversores\/conversor-velocidad-transferencia-de-datos\/\">conversor de velocidad de transferencia de datos<\/a> o el <a href=\"https:\/\/wpcalc.com\/es\/conversores\/conversor-de-unidades-de-velocidad\/\">conversor de unidades de velocidad<\/a> general.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Convierte una longitud CSS entre px, rem, em, vw, vh, pt y porcentaje. Introduce el valor, elige su unidad, ajusta el tama\u00f1o de fuente del elemento ra\u00edz y del padre junto con las dimensiones de la ventana, y obt\u00e9n todos los equivalentes de una sola vez.<\/p>\n","protected":false},"author":3168,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17],"tags":[40],"class_list":["post-5185","post","type-post","status-publish","format-standard","hentry","category-conversores","tag-otras-unidades"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/posts\/5185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/comments?post=5185"}],"version-history":[{"count":1,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/posts\/5185\/revisions"}],"predecessor-version":[{"id":5873,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/posts\/5185\/revisions\/5873"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/media?parent=5185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/categories?post=5185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/tags?post=5185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}