Comprender las unidades CSS (y cómo usarlas)

Probablemente haya visto varias unidades CSS en código web antes, pero comprender cómo funcionan le permite usarlas más intencionalmente. En esta publicación, aprenderá qué son realmente las unidades CSS, cómo afectan sus diseños y cómo usarlos dentro de Divi 5 le ayuda a diseñar de manera más contundente.

Divi 5 trae apoyo nativo para las unidades CSS directamente al constructor. Gracias a la nueva función de unidades avanzadas, puede usar %, EM, REM, VW y más sin código personalizado.

¿Qué son las unidades CSS?

Las unidades CSS le dicen al navegador qué tan grande o pequeño debería ser algo. Ya sea que esté estableciendo el tamaño de un encabezado, el ancho de una sección o el espacio entre elementos, está utilizando unidades para definir ese espacio. Sin ellos, el navegador no tiene idea de qué hacer con sus valores.

Por ejemplo, escribir ancho: 100 no significa nada para el navegador. Pero agregue una unidad, como 100px o 100%, y ahora sabe exactamente lo que desea.

Tome este ejemplo con cuatro cuadros, cada uno usando un valor CSS diferente:

• El primero usa el ancho: 100. Técnicamente inválido, pero muchos navegadores lo convertirán en 100%.
• El segundo (100px) usa un ancho fijo.
• La tercera y cuarta escala (100% y 60%) en relación con el contenedor principal.

Quizás se pregunte por qué la primera caja con ancho: 100 todavía parece ancho completo, aunque técnicamente es inválido.

Ancho: 100 es ignorado por el navegador porque carece de una unidad. Pero en este caso, la caja todavía se extiende por el contenedor, no porque el CSS fuera aceptado, sino porque los elementos de nivel de bloque como Div se extienden naturalmente el ancho completo de sus padres por defecto. Es una coincidencia de comportamiento por defecto, no un resultado de que el CSS inválido se interprete como 100%.

Unidades CSS populares

Aunque PX y % aparecen comúnmente, muchos otros son igual de útiles una vez que sepa cuándo usarlos:

Verá estas unidades en todas partes en el diseño web, desde el ajuste de los tamaños de fuentes, la definición de anchos de sección, ajustando el relleno y los márgenes, y la construcción de diseños de cuadrícula flexibles. Son uno de los factores decisivos más importantes en cómo se ve y se comporta su diseño. Y donde usa qué unidades importan más en un diseño efectivo, llegaremos a eso en breve.

Pero primero, es útil saber que todas las unidades CSS caen en dos tipos principales: absoluto y relativo.

Unidades absolutas y relativas

Comprender la diferencia es esencial si desea que su diseño funcione bien en diferentes tamaños de pantalla.

Unidades absolutas

Las unidades absolutas tienen valores fijos. Esto significa que cuando establece algo en 100px, siempre tendrá 100 píxeles de ancho, ya sea que el usuario esté en un teléfono, una tableta o un monitor de escritorio masivo. Estas unidades no responden al tamaño de la pantalla o al diseño circundante, lo que las hace excelentes cuando necesita un control exacto.

A menudo se usan para bordes, tamaños de iconos o sombras de caja fija, generalmente donde la precisión importa más que la flexibilidad.

Pero esa misma precisión puede causar problemas. Un diseño que se ve perfecto en una pantalla grande puede desbordarse, encogerse torpemente o romperse completamente en dispositivos más pequeños. Dado que las unidades absolutas no se adaptan, pueden hacer que su diseño se sienta rígido a menos que se use con cuidado.

Unidades relativas

Como su nombre indica, estos se ajustan en función de su entorno. En lugar de permanecer bloqueados a un tamaño específico, se escala dependiendo del contexto (elemento principal, ventana gráfica, etc.). Esto los hace mucho más flexibles para el diseño receptivo.

Algunas unidades responden al tamaño del elemento principal, otras al tamaño de la fuente raíz de la página, y otras incluso reaccionan a la ventana del navegador. Aquí hay algunas clave:

• % de escalas con el contenedor principal.
• EM se ajusta según el tamaño de fuente del elemento principal.
• REM sigue el tamaño de fuente de raíz de la página.
• VW y VH responden al ancho y la altura de la ventana gráfica del navegador.

Debido a que se adaptan a diferentes entornos, estas unidades lo ayudan a construir diseños que se sienten naturales en cualquier pantalla. Se expanden o se encogen con el espacio que se les da, lo que mantiene su contenido legible y su diseño equilibrado entre los dispositivos.

Veamos un ejemplo rápido para ver por qué es importante esta flexibilidad. Supongamos que está construyendo una sección de imagen y establece su ancho en 1200px.

Eso puede verse perfecto en un monitor grande, pero en una tableta con un ancho de pantalla de 768 píxeles, la imagen podría desbordarse y verse rara. Ahora intente usar:

width: 100%;

Esto le dice al navegador que haga que la imagen llene el ancho de su contenedor. Ya sea que la pantalla sea ancha o estrecha, la imagen se ajusta automáticamente.

El beneficio real de usar una unidad relativa es la capacidad de respuesta. No solo está asignando un tamaño, sino que le da al navegador instrucciones claras sobre cómo su diseño debe comportarse en diferentes escenarios. Y cuando lo hagas bien, tu contenido encaja en cada pantalla.

Al usar unidades relativas donde tienen sentido, evita diseños rígidos, reduce la necesidad de puntos de interrupción y mantiene su diseño más fácil de administrar. Y con Divi, no tiene que escribir una sola línea de código para usar diferentes unidades CSS. Seleccione la unidad que desee en el constructor y vea su diseño en tiempo real.

Cuándo usar qué unidad CSS

Ahora que comprende la diferencia entre unidades absolutas y relativas, el siguiente paso es saber cuándo usar cada una.

Como regla general, vaya con unidades relativas cuando su diseño necesite adaptarse a diferentes tamaños de pantalla. Estos son perfectos para anchos de sección, tipografía, espacio entre elementos o diseños de página completa. Debido a que se escalan automáticamente, lo ayudan a mantener la consistencia sin crear estilos separados para cada dispositivo.

Por otro lado, las unidades absolutas son útiles cuando desea que algo permanezca igual independientemente del tamaño de la pantalla. Piense en fronteras, iconos, espaciado fijo o pequeños detalles visuales.

Aquí hay algunos ejemplos para guiar sus elecciones:

• Use PX cuando necesite control exacto, como para los tamaños de iconos. Como no se adapta, evítelo para los anchos o el texto de diseño.
• Use % cuando desee elementos para escalar con su contenedor.
• Use EM cuando desee el espacio para escalar con el tamaño de fuente del elemento principal.
• Use REM (comúnmente denominado Root EM) si desea un tamaño consistente en su sitio. Dado que se basa en el tamaño de la fuente de la raíz, mantiene el espacio y la tipografía predecible.
• Use VW y VH para secciones de pantalla completa, áreas de héroes o espacios que respondan directamente a la ventana gráfica (la vista completa de la pantalla de su dispositivo).

Para un control más avanzado, también puede combinar unidades utilizando funciones CSS. Calc () es útil cuando se mezcla valores como 1REM + 5VW para un espaciado receptivo con una base mínima. Y Clamp () es ideal para establecer valores de líquido que crecen o se encogen entre los límites, por lo que es una alternativa más limpia a las consultas de los medios.

Al final, elegir la unidad correcta implica considerar cómo cada elemento debe comportarse en diferentes escenarios y elegir la unidad que mejor logre.

Las unidades avanzadas de Divi para construir de forma recopilada sin codificar

Ya hemos visto cómo las unidades CSS le dan control sobre el comportamiento de diseño. Divi 5 toma ese control y hace que sea fácil de usar con unidades avanzadas.

Suscríbete a nuestro canal de YouTube

Con el soporte nativo para %, EM, REM, VW y VH construidos directamente en el constructor, puede aplicar valores de CSS reales a módulos, secciones, espacios y tipografía, sin necesidad de abrir un panel de código. En cualquier campo numérico, simplemente seleccione su unidad preferida del menú desplegable de la unidad avanzada, ajuste el valor y vea los cambios en vivo.

Y no se detiene allí. Divi también le permite usar funciones CSS avanzadas como Calc () y Clamp () en el Visual Builder. Eso significa que puede crear valores de fluido, unidades de mezcla y diseños de ajuste fino con el mismo nivel de precisión que los desarrolladores obtienen de los CS escritos a mano, pero visualmente.

¿Necesita un tamaño de fuente que escala fluida en diferentes tamaños de pantalla? Use Clamp (). ¿Quiere compensar el espacio con una combinación de valores fijos y flexibles? Prueba calc (). Divi lo maneja todo, al instante y visiblemente.

Ya no estás adivinando o cambiando entre diseño y código. Divi le brinda la potencia visual y la retroalimentación instantánea para obtener la lógica receptiva correcta con el control total sobre cómo se escala y se comportan sus elementos en todos los dispositivos.

Aprenda todo sobre las unidades avanzadas de Divi 5

Las unidades CSS se sincronizan perfectamente con los flujos de trabajo avanzados de Divi

Ya has visto cómo Divi hace que el uso de unidades CSS individuales sea fácil dentro del constructor. Pero la verdadera fuerza se muestra cuando esas unidades trabajan juntas en todo su sitio. Ahí es donde características como variables de diseño, preajustes de grupos de opciones y funciones avanzadas de CSS como Calc () y Clamp () realmente brillan.

Divi no solo te permite ingresar a las unidades CSS en los campos. Le ayuda a integrarlos en todo su sistema de diseño sin escribir código. Todo se mantiene consistente, escalable y más fácil de mantener.

Veamos cómo Divi lo ayuda a usar unidades CSS como parte de un flujo de trabajo flexible y lógico:

1. Crear lógica de diseño con variables de diseño

Una de las formas más fáciles de ahorrar tiempo en cualquier proyecto es planificar su lógica de diseño por adelantado. En lugar de ajustar el mismo espacio o tamaño de fuente en varios lugares, define esos valores una vez y los reutiliza en todo su diseño, con las variables de diseño de Divi.

Puede crear valores reutilizables como –Card-Padding o –-Sección-GAP, usando unidades CSS reales como 2REM, 5VW o incluso fórmulas como Calc (2REM + 1VW). Una vez establecido, estos valores se pueden aplicar a través de módulos, filas y secciones para mantener todo consistente.

Solo tiene que actualizar la variable si desea cambiarla más tarde. El cambio se refleja en todas partes que se usa, lo que te ahorra la parte de ida y vuelta de la caza de configuraciones individuales. Y debido a que las unidades CSS están construidas directamente en el sistema de Divi, no confía en las conjeturas, sino que aplica la lógica real de CSS, visualmente. Eso hace que su diseño sea más manejable, escalable y más fácil de ajustar a medida que su proyecto crece.

2. Use Clamp () y Calc () visualmente

CSS funciona como Clamp () y Calc () lo ayudan a construir diseños receptivos. Le permiten definir valores flexibles que se ajustan a través de los tamaños de pantalla sin escribir consultas de medios. Entonces, en lugar de establecer tamaños fijos para cada dispositivo, puede escribir una lógica como Clamp (1REM, 2VW, 2.5REM) para permitir que el navegador escala las cosas suavemente entre los límites establecidos. O use Calc (100VH - 80px) para ajustar una sección de héroes en función de la altura de su visión.

Normalmente, requieren escribir CSS manualmente. En Divi, puede ingresarlos directamente dentro de cualquier campo de número.

Y debido a que las unidades CSS son compatibles con ambas funciones, puede mezclar valores como REM, VW y PX para obtener exactamente el comportamiento que desea. Usted ve los resultados en vivo como escribe, lo que facilita el experimento y obtiene la capacidad de respuesta correcta sin dejar al constructor.

3. Guardar la lógica de la unidad con los preajustes del grupo de opciones

Una vez que haya configurado diseños usando unidades o fórmulas avanzadas, no tiene que reconstruirlos nuevamente. Divi le permite guardar su lógica de estilo, incluidas cosas como el relleno: Clamp (1REM, 3VW, 2REM), como un grupo de opciones preestablecido.

Eso significa que la próxima vez que necesite el mismo patrón de espaciado o diseño, no aplica la misma configuración, sino solo el preajuste guardado.

Y si usa variables de diseño dentro de los preajustes, es aún mejor. Puede crear fácilmente un sistema interconectado en el que la modificación de los estilos de su sitio web depende de una sola cosa: cambiar la variable.

En Divi, el uso de una unidad CSS no es solo un tamaño; Se trata de comportamiento. Cada valor que establece se convierte en parte de un sistema visual que se adapta, escala y permanece constante en su diseño. Y debido a que todo está integrado en el constructor, se siente menos como codificación y más como diseñar con lógica.

Divi convierte las unidades CSS en una superpotencia visual

No necesita escribir CSS para usar unidades CSS. Divi 5 los lleva a todos a una interfaz visual donde puede explorar, aplicar y obtener una vista previa en tiempo real. Ya sea que esté ajustando el espacio, la construcción de la tipografía de líquidos o la creación de lógica de diseño con variables y preajustes, Divi le permite hacerlo todo visualmente.

¿Listo para probarlo? Descargue Divi 5 y comience a usar unidades CSS reales en sus diseños.