Empecemos con lo básico.
En CSS, puede especificar tamaños o longitudes de elementos utilizando varias unidades de medida. Las unidades de medida que encontrará en algunas opciones de Elementor incluyen PX, EM, REM,%, VW y VH, aunque hay varios más disponibles en CSS. No todos los elementos de Elementor ofrecerán todas estas unidades. Elementor solo presenta las opciones que tienen más sentido para el elemento dado.
El aspecto más importante para aprender sobre las diferentes unidades es que algunas unidades, como PX, son unidades absolutas y otras son unidades relativas.
Unidades absolutas
PX: Los píxeles (px) se consideran unidades absolutas, aunque son relativas al DPI y la resolución del dispositivo de visualización. Pero en el dispositivo en sí, la unidad PX es fija y no cambia en función de ningún otro elemento. El uso de PX puede ser problemático para los sitios receptivos, pero es útil para mantener un tamaño consistente para algunos elementos. Si tiene elementos que no deberían cambiar de tamaño, entonces usar PX es una buena opción.
Unidades relativas
EM: Relativo al elemento padre
movimiento rápido del ojo: Relativo al elemento raíz (etiqueta HTML)
%: Relativo al elemento padre
VW: Relativo al ancho de la ventana gráfica
VH: Relativo a la altura de la ventana gráfica
A diferencia de PX, las unidades relativas como%, EM y REM se adaptan mejor al diseño receptivo y también ayudan cumplir con los estándares de accesibilidad. Las unidades relativas escalan mejor en diferentes dispositivos porque pueden escalar hacia arriba y hacia abajo de acuerdo con el tamaño de otro elemento.
Veamos un ejemplo sencillo.
En la mayoría de los navegadores, el tamaño de fuente predeterminado es 16px. Las unidades relativas calculan el tamaño a partir de esta base. Si cambia esa base estableciendo un tamaño de base para la etiqueta HTML a través de CSS, eso se convierte en la base para calcular las unidades relativas en el resto de la página. Del mismo modo, si un usuario ajusta su tamaño de fuente, eso se convierte en la base para calcular las unidades relativas.
Entonces, ¿qué significan estas unidades cuando se trata del valor predeterminado de 16px?
El número que especifique multiplicará ese número por el tamaño predeterminado.
1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)
1rem = 16 px
2rem = 32px
.5rem = 8px
100% = 16 px
200% = 32 px
50% = 8 px
Muy bien, pero ¿y si tú o el usuario cambian el tamaño predeterminado? Debido a que estas son unidades relativas, los valores de tamaño final se basarán en el nuevo tamaño base. Aunque el valor predeterminado es 16px, si usted o el usuario lo cambiaran a 14px, los tamaños calculados terminarían siendo:
1em = 14px (1 * 14)
2em = 28px (2 * 14)
.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
.5rem = 7px
100% = 14 px
200% = 28 px
50% = 7px
Esto le da al usuario la libertad de ajustar el tamaño de fuente predeterminado de su navegador, mientras mantiene la escala relativa de cada elemento que ha especificado.
¿Cuál es la diferencia entre EM y REM?
Mirando el gráfico de arriba, muestra EM y REM con exactamente el mismo aspecto. Entonces, ¿en qué se diferencian?
En pocas palabras, difieren en función de la herencia. Como se mencionó, REM se basa en el elemento raíz (HTML). Cada elemento hijo que usa REM utilizará el tamaño de la raíz HTML como punto de cálculo, independientemente de si un elemento padre tiene o no especificados tamaños diferentes.
EM, por otro lado, se basa en el tamaño de fuente del elemento principal. Si un elemento principal tiene un tamaño diferente al del elemento raíz, el cálculo de EM se basará en el elemento principal y no en el elemento raíz. Esto significa que los elementos anidados que usan EM para dimensionar a veces pueden terminar teniendo un tamaño que no anticipaba. Por otro lado, le brinda un control más detallado si lo necesita para especificar el tamaño de un área particular de una página.
Entonces, ¿qué pasa con%, VW y VH? ¿De qué se tratan?
Mientras que PX, EM y REM se usan principalmente para el tamaño de fuente,%, VW y VH se usan principalmente para márgenes, relleno, espaciado y anchos / alturas.
Para reiterar, VH significa «altura de la ventana gráfica», que es la altura de la pantalla visible. 100VH representaría el 100% de la altura de la ventana gráfica o la altura total de la pantalla. Y, por supuesto, VW significa «viewport width», que es el ancho de la pantalla visible. 100VW representaría el 100% del ancho de la ventana gráfica, o el ancho completo de la pantalla. % refleja un porcentaje del tamaño del elemento principal, independientemente del tamaño de la ventana gráfica.
Veamos algunos ejemplos de dónde Elementor ofrece opciones%, VW y VH.
Anchos de columna: Si edita el diseño de una columna Elementor, notará que solo hay una unidad de tamaño de ancho disponible:%. Los anchos de columna solo funcionan bien y de manera receptiva cuando se usan porcentajes, por lo que no se ofrece ninguna otra opción.
Márgenes: Los márgenes de una sección se pueden especificar en PX o%. Por lo general, es preferible usar% para garantizar que los márgenes no sean más grandes que el contenido al reducir la escala para un dispositivo móvil, por ejemplo. Al usar un porcentaje del ancho del dispositivo, sus márgenes se mantendrán en relación con el tamaño del contenido, lo que casi siempre es preferible.
Relleno: El relleno de una sección se puede especificar en PX, EM o%. Al igual que con los márgenes, a menudo es preferible utilizar EM o% para que el relleno permanezca relativo a medida que aumenta el tamaño de la página.
Tamaño de fuente: Si edita la tipografía de un elemento, como un encabezado, verá cuatro opciones: PX, EM, REM y VH
¿Alguna vez ha creado un encabezado grande y ha admirado lo bien que se veía en el escritorio, solo para darse cuenta de que era demasiado grande en el móvil? (Admisión de culpa: tengo, más de una vez).
La clave para resolver esto de manera elegante es usar EM, REM o VW en lugar de PX. Lo que elija depende de su situación particular. Por lo general, elijo EM porque quiero que el tamaño sea relativo al padre del encabezado. Pero si prefiere que el tamaño sea relativo al tamaño de la raíz (HTML), elija REM en su lugar. O bien, puede configurarlo para que sea relativo al ancho de la ventana gráfica (VW) si eso funciona mejor para su caso.
Tenga en cuenta que también puede establecer valores PX de tamaño de fuente específicos por dispositivo utilizando los iconos de dispositivo para especificar un tamaño para computadora de escritorio, tableta y dispositivo móvil. Pero eso todavía impone límites a la capacidad de respuesta y la accesibilidad, así que téngalo en cuenta si elige PX.
Más sobre VW y VH
Las unidades de la ventana gráfica representan un porcentaje de la ventana actual del navegador (tamaño actual del navegador). Si bien es similar a las unidades porcentuales, hay una diferencia. Las unidades de la ventana gráfica se calculan como un porcentaje del tamaño actual de la ventana gráfica del navegador. Por otro lado, las unidades de porcentaje se calculan como un porcentaje del elemento principal, que puede ser diferente del tamaño de la ventana gráfica.
Consideremos un ejemplo de una ventana gráfica de pantalla móvil de 480 px x 800 px.
1 VW = 1% del ancho de la ventana gráfica (o 4,8 px)
50 VW = 50% del ancho de la ventana gráfica (o 240 px)
1 VH = 1% de la altura de la ventana gráfica (o 8px)
50 VH = 50% de la altura de la ventana gráfica (o 400 px)
Si el tamaño de la ventana gráfica cambia, el tamaño del elemento cambia respectivamente.
¿Cuándo debe usar una unidad sobre otra?
En última instancia, no existe una respuesta perfecta para esta pregunta. En general, a menudo es mejor elegir una de las unidades relativas en lugar de PX para que su página web tenga la mejor oportunidad de representar un diseño bellamente receptivo. Escoger PX sin embargo, si necesita asegurarse de que un elemento nunca cambie de tamaño en ningún punto de interrupción y permanezca igual independientemente de si un usuario ha elegido un tamaño predeterminado diferente. Las unidades PX garantizan resultados consistentes incluso si eso no es ideal.
EM es relativo al tamaño de fuente del elemento principal, por lo que si desea escalar el tamaño del elemento según el tamaño de su elemento principal, utilice EM.
movimiento rápido del ojo es relativo al tamaño de fuente de la raíz (HTML), por lo que si desea escalar el tamaño del elemento en función del tamaño de la raíz, sin importar cuál sea el tamaño principal, use REM. Si ha utilizado EM y está encontrando problemas de tamaño debido a muchos elementos anidados, REM probablemente sea la mejor opción.
VW es útil para crear elementos de ancho completo (100%) que llenan todo el ancho de la ventana gráfica. Por supuesto, puede usar cualquier porcentaje del ancho de la ventana gráfica para lograr otros objetivos, como 50% para la mitad del ancho, etc.
VH es útil para crear elementos de altura completa (100%) que llenan toda la altura de la ventana gráfica. Por supuesto, puede usar cualquier porcentaje de la altura de la ventana gráfica para lograr otros objetivos, como el 50% para la mitad de la altura, etc.
% es similar a VW y VH, pero no es una longitud relativa al ancho o alto de la ventana gráfica. En cambio, es un porcentaje del ancho o alto del elemento padre. Las unidades de porcentaje suelen ser útiles para establecer el ancho de los márgenes, por ejemplo.
Elementor facilita la elección de la opción que mejor se adapte a su diseño. En última instancia, es tu elección.
