Empecemos con lo básico.
En CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a más, 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 HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las más)
%: 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 navegadoresConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet más, 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 navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más, 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 contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más 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 accesibilidadAccesibilidad significa que algo puede ser usado, obtenido, acercado, ingresado o alcanzado. De ello pueden derivarse dos significados aplicables a Internet. En primer lugar, la provisión de acceso a Internet a las personas con discapacidad o a las personas mayores lo más libre viable de barreras y, en segundo lugar, la accesibilidad y la legibilidad de una web para un crawler. Accesibilidad en términos de ausencia de barreras Actualmente, Internet más, 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.
