Ir al contenido 
PX, %, EM, REM, VW y VH determinan respecto a qué referencia Elementor calcula el tamaño de un texto, Container, espacio o elemento. Elegir correctamente la unidad ayuda a mantener el diseño estable y adaptable entre computador, tablet y celular.
La confusión aparece porque un valor como 50 no significa nada por sí solo. 50px, 50%, 50vw y 50vh producen resultados completamente diferentes.
Además, Elementor no ofrece todas las unidades en todos los controles. Su documentación actual confirma que el editor utiliza PX, EM, REM, %, VW y VH en distintas propiedades, pero únicamente presenta las opciones que tienen sentido para cada elemento o configuración.
Por eso, aprender las unidades de medida en Elementor no consiste en escoger una favorita y utilizarla en toda la página.
La pregunta correcta es:
¿Respecto a qué quiero que se calcule esta dimensión?
¿Qué son las unidades de medida en Elementor?
Elementor es una interfaz visual, pero por debajo convierte las configuraciones que realizamos en estilos CSS.
Cuando definimos:
- Tamaño de una fuente.
- Ancho de un Container.
- Altura mínima.
- Padding.
- Margin.
- Gap.
- Tamaño de una imagen.
- Espacio entre elementos.
necesitamos indicar no solamente una cantidad, sino cómo debe interpretar el navegador esa cantidad.
Por ejemplo:
400px significa una dimensión concreta dentro del sistema de píxeles CSS.
50% depende de otra dimensión de referencia.
50vw depende del ancho del navegador.
50vh depende de su altura.
Elementor confirma además que no todos los controles ofrecen las mismas unidades; cada propiedad muestra aquellas que tienen sentido para ella.
Esto explica por qué puedes encontrar % al configurar Width, pero opciones diferentes al modificar Typography o Spacer.
Unidades absolutas vs unidades relativas
Para entender las unidades de medida en Elementor, primero conviene dividirlas en dos grupos.
Unidad absoluta: PX
PX se considera una unidad absoluta dentro de CSS.
Esto significa que no calcula su tamaño basándose directamente en el ancho del Container, la fuente raíz o el viewport. Mantiene un valor concreto dentro del sistema de píxeles CSS.
Un píxel CSS no debe confundirse necesariamente con un píxel físico individual de la pantalla. Los dispositivos modernos manejan densidades y resoluciones diferentes.
Unidades relativas
Estas dependen de otra referencia:
| Unidad | Tipo | Referencia principal |
|---|---|---|
| PX | Absoluta | Valor CSS fijo |
| % | Relativa | Otro valor, frecuentemente el elemento padre |
| EM | Relativa | Contexto tipográfico |
| REM | Relativa | Fuente del elemento raíz |
| VW | Relativa | Ancho del viewport |
| VH | Relativa | Altura del viewport |
MDN especifica que em, rem, vw y vh son longitudes relativas, mientras los porcentajes siempre dependen de alguna otra cantidad. El comportamiento exacto de % depende de la propiedad donde se utilice.
Comparativa rápida de PX, %, EM, REM, VW y VH
| Unidad | Se calcula respecto a | Puede ser útil para | Precaución |
|---|---|---|---|
| PX | Valor concreto | Bordes, detalles y tamaños controlados | Puede requerir ajustes por breakpoint |
| % | Referencia correspondiente | Anchos y layouts | Depende del contexto |
| EM | Contexto tipográfico | Botones y componentes | Puede acumular efectos |
| REM | Elemento raíz | Tipografía y escalas | Necesita un sistema coherente |
| VW | Ancho de pantalla | Elementos fluidos | Puede crecer demasiado |
| VH | Alto de pantalla | Hero y portadas | Debe probarse en móvil |
Elementor recomienda escoger según la situación y no establece una única unidad como respuesta correcta para todos los diseños.
Las 6 unidades de medida en Elementor explicadas
1. PX: píxeles para tener control directo
PX es la unidad más intuitiva para alguien que empieza en Elementor.
Si escribes:
64px
estás definiendo una dimensión concreta.
Elementor explica que PX resulta útil cuando quieres mantener un tamaño consistente y no necesitas que ese valor dependa de otro elemento.
¿Cuándo puede ser útil?
- Borders.
- Radios.
- Iconos.
- Algunos gaps.
- Dimensiones pequeñas.
- Límites máximos.
- Tipografía con valores específicos por breakpoint.
Por ejemplo, puedes configurar de manera ilustrativa:
Desktop: 64px
Tablet: 46px
Mobile: 34px
No significa que esos sean tamaños recomendados universalmente. Solo demuestra que utilizar PX no impide crear un diseño responsive si defines correctamente los breakpoints.
¿Dónde aparecen los problemas?
Imagina un Container con:
width: 1300px
En una pantalla de 375px ese elemento no cabe.
Lo mismo ocurre con:
- Márgenes laterales enormes.
- Imágenes de ancho fijo.
- Botones demasiado largos.
- Min Width excesivo.
Elementor incluso advierte que dimensiones absolutas pueden verse correctamente dentro del editor y comportarse diferente en el frontend porque el panel del editor modifica el ancho disponible del viewport.
PX no está prohibido.
El problema es utilizar una medida fija cuando el elemento necesita adaptarse.
2. %: porcentaje relativo al espacio disponible
Un porcentaje no representa un tamaño independiente.
Siempre se calcula respecto a otra cantidad.
En un width, normalmente significa un porcentaje del ancho del elemento padre. MDN confirma que width: 40%, por ejemplo, utiliza como referencia el ancho del padre.
Imagina un Container principal.
Container padre: 100%
Dentro colocas:
Texto: 55%
Imagen: 45%
Esto permite construir una distribución proporcional.
Después, en móvil, puedes cambiar ambos a:
Texto: 100%
Imagen: 100%
y apilarlos.
Los Containers de Elementor permiten modificar ancho, altura, dirección y orden según breakpoint, precisamente para reorganizar este tipo de layouts.
¿Dónde puede fallar?
Supongamos:
- Elemento A: 50%.
- Elemento B: 50%.
- Gap adicional.
- Márgenes laterales.
La composición puede superar el espacio disponible dependiendo de cómo esté configurado el layout.
También puede aparecer un problema clásico:
Width: 100% + margen lateral
Elementor documenta que añadir margen horizontal a un Container superior ya configurado al 100% puede terminar creando un ancho efectivo superior a la pantalla y producir scroll horizontal.
Por eso % es flexible, pero no elimina la necesidad de entender Containers, Gap, Padding y Margin.
3. EM: tamaño relativo al contexto tipográfico
EM es una unidad especialmente útil cuando quieres que las dimensiones de un componente acompañen el tamaño de su texto.
Aquí existe una pequeña diferencia que vale la pena entender:
- Cuando
emse utiliza enfont-size, toma como referencia la fuente del elemento padre. - En otras propiedades, normalmente se relaciona con el tamaño calculado de fuente del propio elemento.
Ejemplo sencillo:
Padre: 20px
Texto hijo: 1em ≈ 20px
Texto hijo: 1.5em ≈ 30px
Un uso práctico: botones
Imagina:
Font Size: 1rem
Padding vertical: 0.8em
Padding horizontal: 1.5em
Si el texto del botón aumenta, el padding también puede acompañar proporcionalmente ese cambio.
Esto hace que EM resulte útil para:
- Botones.
- Badges.
- Componentes.
- Espaciados ligados al texto.
- Elementos que deben crecer de forma conjunta.
¿Cuál es su principal precaución?
El anidamiento.
Si varios elementos tienen tamaños expresados en EM y dependen unos de otros, los efectos pueden acumularse.
Un componente dentro de otro puede acabar mucho más grande —o pequeño— de lo esperado.
Por eso EM funciona muy bien cuando quieres una relación local, pero debes comprender la referencia.
4. REM: tamaño relativo al elemento raíz
REM significa root em.
En lugar de depender del contexto inmediato, utiliza como referencia el tamaño de fuente del elemento raíz de la página, normalmente html.
En muchas configuraciones habituales:
1rem ≈ 16px
pero no debes tratar esa equivalencia como una ley.
El tamaño raíz puede modificarse y también pueden intervenir preferencias del usuario.
¿Por qué REM resulta útil?
Porque todos los elementos comparten la misma referencia.
Por ejemplo, conceptualmente:
Texto: 1rem
H3: 1.5rem
H2: 2rem
H1: 3rem
No son valores recomendados; muestran cómo puede construirse una escala.
Esta estructura es útil cuando trabajas con:
- Global Fonts.
- Design Systems.
- Escalas tipográficas.
- Espaciados globales.
- Componentes reutilizables.
REM vs EM
La diferencia principal es la referencia.
EM puede cambiar según el contexto local.
REM vuelve siempre a la raíz.
Esto hace que REM sea más predecible en estructuras con muchos niveles anidados.
Pero tampoco significa que REM deba reemplazar automáticamente todo PX o EM de una página.
5. VW: dimensiones relativas al ancho del viewport
VW significa viewport width.
1vw equivale al 1% del ancho del viewport.
Por ejemplo, si conceptualizamos una pantalla de 1200px:
10vw ≈ 120px
Elementor define VW precisamente como una unidad relativa al ancho actual del navegador.
Puede utilizarse en:
- Elementos decorativos.
- Layouts de pantalla completa.
- Anchuras fluidas.
- Algunas composiciones visuales.
- Tipografía fluida, con precaución.
¿Cuál es el riesgo?
Que la dimensión continúe creciendo o reduciéndose junto con la pantalla.
Un H1 configurado únicamente en VW puede verse bien en una laptop y terminar:
- Demasiado pequeño en móvil.
- Gigantesco en una pantalla ultraancha.
En esos casos conviene utilizar:
- Breakpoints.
- Min/Max.
- Una función como
clamp()cuando el proyecto requiera CSS más avanzado.
Elementor también permite utilizar determinadas funciones matemáticas CSS en controles compatibles para combinar unidades, aunque no es necesario para entender o utilizar las opciones básicas.
100% y 100vw no son lo mismo
100% depende de la referencia correspondiente, frecuentemente el padre.
100vw representa el ancho completo del viewport.
Esta diferencia explica muchos problemas de overflow.
6. VH: dimensiones relativas a la altura del viewport
VH significa viewport height.
1vh equivale al 1% de la altura del viewport.
Por eso:
100vh
busca ocupar una altura equivalente al viewport completo.
Se utiliza con frecuencia en:
- Hero sections.
- Portadas.
- Banners grandes.
- Presentaciones.
- Composiciones fullscreen.
Un ejemplo ilustrativo podría ser:
Hero Min Height: 70vh
Esto permitiría relacionar la sección con la altura disponible.
¿Por qué 100vh puede verse mal en celular?
Los navegadores móviles tienen barras superiores e inferiores que pueden aparecer y desaparecer mientras el usuario navega.
El concepto de viewport puede cambiar durante esa interacción, por lo que los layouts que dependen rígidamente de toda la altura necesitan pruebas reales.
CSS moderno dispone además de variantes como:
dvh.svh.lvh.
que representan distintos comportamientos del viewport dinámico, pequeño y grande. MDN documenta estas unidades modernas.
Sin embargo, la documentación estándar de unidades de Elementor consultada actualmente enumera PX, EM, REM, %, VW y VH; por eso no debes asumir que dvh, svh o lvh aparecen como opciones nativas en todos sus selectores.
Muchas veces también resulta más seguro trabajar con Min Height que con una altura rígida, permitiendo que el contenido amplíe la sección cuando lo necesite.
% vs VW: parecen similares, pero no son iguales
Esta diferencia merece especial atención.
Imagina:
Viewport: 1400px
Container padre: 1000px
Ahora configuramos:
50% del Container: aproximadamente 500px.
50vw: aproximadamente 700px.
Aunque ambos contienen el número 50, utilizan referencias distintas.
Elementor lo resume así:
%→ referencia del elemento padre.VW→ ancho del viewport.
Por eso 100vw dentro de un Container que ya tiene ancho limitado puede exceder la estructura.
En la mayoría de layouts internos, % suele tener más sentido cuando quieres respetar la estructura del Container.
VW resulta apropiado cuando realmente quieres relacionar la dimensión con toda la pantalla.
EM vs REM: ¿cuál es la diferencia?
Podemos resumirlo así:
EM → contexto tipográfico local.
REM → raíz del documento.
Imagina:
Elemento padre: 1.2em
→ Hijo: 1.2em
→ Nieto: 1.2em
Al utilizar font-size, cada nivel puede multiplicar la referencia heredada.
En cambio:
Root
→ 1.2rem
→ 1.2rem
→ 1.2rem
todos utilizan la misma referencia raíz.
MDN demuestra exactamente este efecto al comparar listas anidadas con EM y REM.
| Característica | EM | REM |
|---|---|---|
| Referencia | Contexto tipográfico | Root HTML |
| Anidamiento | Puede acumularse | Más predecible |
| Componentes locales | Muy útil | Útil |
| Sistema global | Puede complicarse | Muy útil |
¿Qué unidad utilizar para tipografía en Elementor?
No existe una única respuesta.
Estrategia sencilla: PX + breakpoints
Puede funcionar muy bien en proyectos donde:
- Existen pocos niveles tipográficos.
- Se controla desktop, tablet y móvil.
- Se busca precisión visual.
- El equipo entiende los breakpoints.
Por ejemplo:
H1 desktop → PX
H1 tablet → otro PX
H1 móvil → otro PX
Estrategia escalable: REM
Puede resultar más cómoda cuando tienes:
- Global Fonts.
- Una escala tipográfica.
- Muchos componentes.
- Un Design System.
Estrategia contextual: EM
Puede ser útil cuando un componente debe adaptarse a su propio texto.
Es especialmente práctico en paddings y elementos relacionados.
Estrategia fluida: VW
Puede utilizarse en casos concretos, pero no conviene dejar tipografía importante creciendo sin límites.
La propia documentación de Elementor indica que no hay una respuesta perfecta y que la elección depende de la situación.
¿Qué unidad utilizar para Width en Elementor?
Para el ancho de elementos suelen combinarse varias estrategias.
% para layouts internos
Ejemplo:
Texto: 60%
Imagen: 40%
y en móvil:
Texto: 100%
Imagen: 100%
PX o REM para limitar crecimiento
Un patrón habitual es combinar:
Width: 100%
Max Width: un límite
Elementor Editor V4 documenta precisamente esta estrategia: por ejemplo, un elemento puede tener ancho por porcentaje y límites mínimos o máximos en valores concretos para impedir que se haga demasiado pequeño o grande.
VW cuando realmente depende de toda la pantalla
Utilízalo cuando el diseño deba reaccionar al viewport y no únicamente al Container padre.
¿Qué unidad utilizar para altura mínima?
Antes de elegir una unidad, pregunta:
¿Realmente necesito establecer altura mínima?
Muchas secciones deberían permitir que su contenido determine naturalmente la altura.
VH
Es útil para:
- Heroes.
- Portadas.
- Composiciones de pantalla.
PX
Puede servir cuando necesitas garantizar una altura mínima concreta.
Sin Min Height
En servicios, formularios, cards y contenidos extensos puede ser la mejor opción.
Elementor destaca que Min Height permite garantizar espacio suficiente, especialmente en layouts móviles, pero no obliga a configurarlo en todos los Containers.
Forzar alturas innecesarias puede producir:
- Huecos gigantes.
- Contenido cortado.
- Scroll innecesario.
- Diferencias problemáticas entre dispositivos.
¿Qué usar para Margin, Padding y Gap?
Son conceptos diferentes.
Margin
Espacio fuera del elemento.
Padding
Espacio dentro del elemento.
Gap
Separación entre elementos dentro de una estructura Flexbox o Grid.
Puedes utilizar diferentes unidades dependiendo del sistema visual.
Por ejemplo:
- PX para ajustes específicos.
- REM para una escala global.
- EM para espacios asociados con un componente.
- % en determinados layouts.
Elementor permite modificar Gap, dirección, alineación y wrapping dentro de Containers.
Siempre que sea apropiado, Gap suele ser más fácil de mantener para separar elementos hermanos que crear márgenes diferentes en cada uno.
El Spacer Widget sigue existiendo y actualmente permite seleccionar PX, EM, REM, %, VW o VH, pero no necesitas utilizar Spacers para construir todos los espacios de una página.
Tabla práctica: qué unidad elegir según el elemento
| Necesidad | Unidad inicial a considerar | Alternativas |
|---|---|---|
| Border | PX | — |
| Border radius | PX / % | Según diseño |
| Tipografía global | REM | PX |
| Tipografía por breakpoint | PX / REM | EM |
| Padding de botón | EM | REM / PX |
| Width de Containers hijos | % | Flex properties |
| Max Width | PX / REM | — |
| Hero Min Height | VH | PX |
| Elemento relacionado con viewport | VW / VH | % según contexto |
| Espaciado global | REM | EM / PX |
| Elemento decorativo fluido | VW | % |
Esta tabla es un punto de partida, no una norma.
Ejemplo práctico: crear un Hero responsive combinando unidades
Aquí podemos ver por qué un diseño profesional no utiliza una sola unidad para todo.
Container exterior
Width: 100%
Queremos que pueda ocupar el espacio disponible.
Contenido interno
Max Width: un límite controlado.
Así evitamos que el contenido continúe separándose indefinidamente en monitores muy grandes.
Min Height
VH moderado
Relacionamos la portada con la altura de pantalla, pero sin obligarla a utilizar siempre 100vh.
Container de texto
Desktop: porcentaje del espacio.
Móvil: 100%.
Los Containers de Elementor pueden modificar width y organización por breakpoint.
Título
Puede utilizar:
- REM.
- O PX definidos por dispositivo.
La decisión depende del sistema tipográfico.
Botón
El padding puede utilizar EM para mantener cierta relación con el tamaño del texto.
Imagen
Puede trabajar con un ancho porcentual y, en V4, combinar Width con Min/Max para evitar extremos. Elementor documenta esta combinación como una forma de crear elementos responsive manteniendo restricciones de diseño.
El resultado demuestra la idea principal:
Responsive no significa escoger REM para todo. Significa combinar propiedades y referencias con intención.
El error de utilizar 100VH para todas las secciones
100vh tiene un objetivo claro: relacionar una dimensión con toda la altura del viewport.
Puede funcionar en:
- Splash screens.
- Heroes.
- Presentaciones.
- Portadas visuales.
Pero utilizarlo automáticamente en:
- Servicios.
- Testimonios.
- Formularios.
- Artículos.
- Footer.
puede generar secciones artificialmente grandes.
También puedes encontrarte con contenido que excede el alto previsto.
Por eso, antes de utilizar VH, pregúntate si la sección necesita realmente relacionarse con la altura de la pantalla.
El error de poner absolutamente todo en PX
PX no es malo.
Puede ser excelente para:
- Bordes.
- Radios.
- Iconos.
- Límites.
- Pequeños detalles.
- Tipografía definida por breakpoint.
El problema aparece cuando se utiliza indiscriminadamente en:
- Widths grandes.
- Alturas rígidas.
- Márgenes enormes.
- Containers completos.
- Layouts que deben adaptarse.
Por ejemplo, un Container de 1100px de ancho necesita una estrategia diferente cuando el teléfono tiene unos pocos cientos de píxeles disponibles.
El error contrario: utilizar unidades relativas para absolutamente todo
Tampoco necesitas que cada elemento cambie continuamente.
Ejemplos poco prácticos podrían ser:
- Bordes diminutos expresados en VW.
- Iconos que cambian excesivamente con el viewport.
- Tipografías sin mínimos ni máximos.
- Márgenes dependientes de un padre cuyo tamaño cambia inesperadamente.
Responsive no significa que absolutamente todas las dimensiones deban cambiar continuamente.
Hay elementos que necesitan flexibilidad y otros que necesitan estabilidad.
Cómo comprobar qué unidad está provocando un problema responsive
Cuando una página se rompe en celular, sigue un orden.
- Identifica el elemento exacto.
- Revisa Width.
- Comprueba Min Width y Max Width.
- Revisa Height o Min Height.
- Comprueba Margin.
- Revisa Padding.
- Revisa Gap.
- Comprueba Typography.
- Cambia a Tablet.
- Cambia a Mobile.
- Revisa valores específicos de cada breakpoint.
- Prueba el frontend real.
- Limpia caché cuando sea necesario.
En Elementor V3, los ajustes de Containers suelen localizarse principalmente dentro de Layout y Advanced.
En Editor V4, el control moderno de tamaño se encuentra dentro de Style > Size y permite trabajar con dimensión normal, mínima, máxima y overflow.
No mezcles tutoriales de V3 y V4 sin comprobar primero cuál editor estás utilizando.
Errores frecuentes al utilizar unidades en Elementor
Widths enormes en PX: producen overflow en pantallas pequeñas.
Utilizar 100vw dentro de un Container limitado: puede ignorar el ancho del padre.
Combinar 100% con márgenes laterales: puede superar el viewport.
Utilizar 100vh para todas las secciones: crea espacios innecesarios.
Usar VW para texto sin límites: puede producir extremos poco legibles.
Anidar muchos EM sin comprender su referencia: puede acumular escalas.
Pensar que REM siempre equivale exactamente a 16px: depende de la raíz.
Confundir % con VW: utilizan referencias distintas.
Configurar Min Height sin necesidad: obliga a mantener espacio aunque no exista contenido suficiente.
Utilizar Spacer para todos los huecos: aumenta elementos cuando Gap o Padding pueden resolver mejor el diseño.
Ignorar Gap: termina repartiendo múltiples márgenes difíciles de mantener.
Diseñar únicamente en desktop: oculta problemas hasta el final.
No probar dispositivos reales: el editor no reproduce todas las condiciones del navegador.
Copiar valores de otra página: el contexto del Container puede ser completamente diferente.
Utilizar la misma unidad para todo: mezcla necesidades que deberían tratarse separadamente.
No utilizar Max Width: deja que los elementos crezcan excesivamente.
Corregir todo con overflow:hidden: puede ocultar el síntoma mientras corta contenido importante.
¿Cómo afectan las unidades al diseño responsive?
Las unidades son solamente una pieza.
También intervienen:
- Flexbox.
- Grid.
- Breakpoints.
- Direction.
- Wrap.
- Max Width.
- Min Width.
- Orden.
- Tipografía.
- Imágenes.
- Cantidad de contenido.
Los Containers de Elementor permiten cambiar dirección, ancho, alto y orden de los elementos según breakpoint.
Por eso cambiar:
PX → REM
no convierte automáticamente una web en responsive.
Un Container mal organizado seguirá siendo problemático aunque todos sus valores sean relativos.
¿Afectan PX, REM o VW al SEO?
No existe una unidad CSS que por sí sola posicione una página mejor.
No hay fundamento para afirmar:
“Google prefiere REM”.
o:
“Utilizar PX perjudica el SEO”.
El impacto puede aparecer indirectamente cuando una configuración produce:
- Mala experiencia móvil.
- Texto ilegible.
- Overflow.
- Contenido cortado.
- Botones inaccesibles.
- Layout inestable.
El objetivo debe ser construir una experiencia funcional y comprensible, no elegir una unidad pensando que Google le asignará más valor.
Una página profesional utiliza cada unidad con una intención
Una web empresarial no debería construirse asignando números aleatorios hasta que “más o menos se vea bien”.
Necesita un sistema:
- Anchos máximos.
- Escalas de espaciado.
- Jerarquía tipográfica.
- Containers.
- Breakpoints.
- Diseño responsive.
- Rendimiento.
- Identidad visual.
En Codwelt desarrollamos diseño de páginas web profesionales administrables con WordPress + Elementor. Los planes publicados actualmente incluyen o pueden incorporar, según el alcance, diseño gráfico profesional, adaptación a celulares, tablets y computadores, hosting, dominio, SSL, optimización de rendimiento, seguridad, Analytics, Search Console, WhatsApp, blog, SEO + IA, capacitación y acompañamiento.
Los planes más avanzados también contemplan una optimización más intensiva de velocidad móvil.
Elegir correctamente entre PX, %, EM, REM, VW y VH no es un detalle técnico aislado: forma parte de construir una página que mantenga proporción, legibilidad y estructura en diferentes pantallas.
Solicita tu página web profesional adaptada a celulares, tablets y computadores.
Preguntas frecuentes
¿Qué son las unidades de medida en Elementor?
Las unidades de medida en Elementor indican cómo debe calcular el navegador una dimensión. PX establece un valor concreto; %, EM, REM, VW y VH utilizan referencias relativas. Elementor no ofrece todas las unidades en todos los controles, sino únicamente las que considera aplicables a cada propiedad.
¿Qué significa PX en Elementor?
PX significa píxel CSS. Es una unidad absoluta y proporciona control directo sobre una dimensión. Puede utilizarse perfectamente para bordes, iconos, límites y tipografía configurada por breakpoints. El problema aparece al utilizar valores fijos grandes en elementos que necesitan adaptarse a pantallas pequeñas.
¿Qué significa % en Elementor?
Un porcentaje utiliza otra cantidad como referencia. En un Width suele calcularse respecto al ancho del elemento padre. Por eso 50% no significa “la mitad de la pantalla” necesariamente; significa la mitad de la referencia correspondiente. Esto lo diferencia de 50vw.
¿Cuál es la diferencia entre EM y REM?
EM utiliza un contexto tipográfico local. Para font-size, depende de la fuente del padre; en otras propiedades suele utilizar la fuente calculada del propio elemento. REM siempre toma como referencia el tamaño de fuente del elemento raíz. Esto hace que REM sea más predecible en estructuras anidadas.
¿Qué significa VW en Elementor?
VW significa viewport width. 1vw equivale al 1% del ancho del viewport. Es útil cuando una dimensión debe reaccionar directamente al ancho de la pantalla. Debe utilizarse con precaución porque una dimensión puede hacerse demasiado pequeña o grande en los extremos.
¿Qué significa VH en Elementor?
VH significa viewport height. 1vh representa el 1% de la altura del viewport. Se utiliza frecuentemente para Min Height en Heroes o composiciones de pantalla completa. En móviles debe probarse cuidadosamente por los cambios que pueden producir las barras del navegador y el viewport dinámico.
¿Es mejor PX o REM en Elementor?
Ninguna es mejor en todos los escenarios. PX proporciona control directo y puede configurarse por breakpoint. REM facilita construir escalas relacionadas con una referencia raíz. Un proyecto sencillo puede trabajar correctamente con PX, mientras un Design System amplio puede beneficiarse de REM.
¿Qué unidad debo usar para tipografía?
Puedes utilizar PX con tamaños específicos por dispositivo, REM para una escala global o EM cuando el tamaño deba relacionarse con un contexto local. VW puede participar en tipografía fluida, pero es recomendable utilizar límites. La elección depende del sistema de diseño y no de una regla universal.
¿Qué unidad debo utilizar para la altura de un banner?
VH puede funcionar cuando el banner debe relacionarse con el alto de la pantalla. PX puede ser útil para una altura mínima específica. Sin embargo, muchas veces no necesitas establecer altura: dejar que el contenido determine el tamaño puede producir un diseño más flexible.
¿Por qué 100VH se ve mal en celular?
Porque 100vh depende de la altura del viewport y los navegadores móviles modifican el espacio visible cuando muestran u ocultan barras de navegación. También puede ocurrir que el contenido necesite más altura que la disponible. Por eso conviene probar dispositivos reales y utilizar Min Height con criterio.
Conclusión
Las seis unidades de medida en Elementor pueden resumirse así:
- PX → control directo.
- % → relativo a otra referencia, normalmente el contexto padre en layouts.
- EM → escala tipográfica local.
- REM → escala basada en el elemento raíz.
- VW → ancho del viewport.
- VH → altura del viewport.
No existe una unidad perfecta para toda una página.
El mejor resultado aparece cuando eliges cada unidad según la propiedad, el contexto y el comportamiento responsive que necesitas.
Una Hero puede combinar %, VH, REM y EM. Una card puede utilizar PX, REM y %. Un botón puede necesitar EM para su padding y un Container puede trabajar con width: 100% acompañado por un Max Width.
Eso es precisamente lo que hace que un sistema sea flexible: no obligar a todas las dimensiones a comportarse igual.
Construye una página responsive con proporciones, espacios y tamaños correctamente definidos. Cotiza tu proyecto con Codwelt.
Fuentes
Codwelt
Codwelt — Diseño de páginas web profesionales
Elementor
Elementor — Units of measurement
Elementor — Selecting measurement units
Elementor — Create responsive design with containers
Elementor — Set a Flexbox Container’s size and behavior
Elementor — Style tab: Size (Editor V4)
