La diferencia entre las unidades CSS absolutas y relativas

Elegir las unidades CSS correctas es más que un detalle técnico. Es lo que ayuda a su diseño a mantenerse consistente, flexible y receptivo en todos los dispositivos. Los píxeles pueden parecer la opción fácil, pero no siempre se comportan previsiblemente en diferentes pantallas.

En esta publicación, explicaremos la diferencia entre unidades absolutas y relativas, y mostraremos cómo Divi 5 lo ayuda a usarlas de manera más efectiva desde el principio.

Las unidades CSS explicaron: ¿Por qué importan para su sitio web?

Las unidades CSS controlan cuán grande aparece todo en su sitio. Elija mal y su diseño se rompe en diferentes dispositivos.

La mayoría de las personas usan píxeles porque son sencillos y fáciles de comprender. Pero los píxeles no se adaptan naturalmente bien al diseño receptivo. Requieren consultas de medios o funciones CSS como Clamp () para responder a los cambios en la pantalla.

Otras unidades se adaptan automáticamente. Escala de unidades de visión con la ventana del navegador. Las unidades relativas como el tamaño de EM se basan en el texto circundante. Diferentes unidades resuelven diferentes problemas. Elija bien y su diseño se adapta a través de dispositivos sin trabajo adicional.

Desglosando unidades absolutas: cuando los tamaños fijos funcionan mejor

Las unidades absolutas mantienen el mismo tamaño, pase lo que pase a su alrededor. Si establece algo en 20 píxeles de ancho, permanece 20 píxeles si alguien lo ve en un teléfono o en un monitor de escritorio masivo. El valor nunca cambia en función del tamaño de la pantalla, los elementos principales o la configuración del navegador.

Los píxeles (PX) gobiernan este espacio. Existen otras unidades absolutas como centímetros, milímetros y pulgadas, pero pertenecen al diseño de impresión donde las mediciones físicas importan. Para el diseño web, los píxeles manejan casi todas las medidas absolutas que necesitará.

¿Por qué los píxeles funcionan muy bien para pequeños detalles?

Algunos elementos de diseño necesitan un control exacto. Un borde de 1 píxel debe verse nítido y delgado en todas partes. Las sombras de caída necesitan precisión para verse bien. Pequeños iconos funcionan mejor cuando se mantienen consistentes en todos los dispositivos.

Los píxeles funcionan excelentemente para estos pequeños detalles. El borde de su botón debe tener precisamente 2 píxeles de espesor, esa sombra sutil debe ser exactamente 4 píxeles compensados, y su icono de navegación debe ser exactamente 24 píxeles cuadrados para una alineación perfecta.

Estas medidas no necesitan escalar con el tamaño de la pantalla. Un borde que tiene 1 píxel en el escritorio debe permanecer 1 píxel en el móvil. Hacerlo 2 píxeles en el móvil se vería grueso y torpe.

Otros elementos también funcionan bien con los píxeles. Los logotipos de la marca a menudo usan píxeles para la consistencia de la marca. Pequeños elementos decorativos como puntos o líneas necesitan tamaño exacto. La carga de hilanderos y barras de progreso funcionan mejor con dimensiones fijas.

Hacer que los píxeles respondan con consultas de medios

Los píxeles no son completamente rígidos. Las consultas de los medios le permiten intercambiar diferentes valores de píxeles en varios tamaños de pantalla. Su encabezado puede usar texto de 32 píxeles en el escritorio, luego saltar a 28 píxeles en tabletas y 24 en teléfonos.

Este enfoque requiere más trabajo que las unidades relativas. Debe definir puntos de interrupción y escribir reglas separadas para cada tamaño de pantalla, pero tiene un control total sobre cómo se ven las cosas en cada tamaño.

Este enfoque funciona bien cuando desea un control específico en cada tamaño de pantalla. Usted decide exactamente cómo se ve su texto en teléfonos versus tabletas versus escritorios en dimensiones específicas. Sin sorpresas.

El CSS adicional vale la pena para los elementos que necesitan un tamaño preciso. Los logotipos se ven mejor cuando permanecen exactamente del tamaño correcto para cada dispositivo. Los elementos de navegación a menudo necesitan dimensiones específicas para funcionar correctamente. Los bordes y las sombras decorativas dependen de las mediciones exactas para verse crujientes.

Comprensión de las unidades relativas: el enfoque flexible para el diseño web

Las unidades relativas, en contraste, estiran y se encogen según lo que les rodea. Esta flexibilidad hace que los sitios web funcionen en teléfonos, tabletas y computadoras sin romperse. A diferencia de las unidades absolutas que permanecen fijas, las unidades relativas se adaptan al tamaño de la pantalla, los elementos principales o las preferencias del usuario.

Estas unidades resuelven los problemas que crean los píxeles. Su botón de 75 píxeles funciona bien en el escritorio pero se vuelve dominante en el móvil. Las unidades relativas se ajustan automáticamente, evitando que escriba estilos separados para cada tamaño de pantalla.

Cómo se construyen unidades Em se construyen entre sí

Las unidades EM son relativas al tamaño de la fuente de su elemento principal inmediato. Si su tamaño de fuente base es de 16 px y establece un contenedor en tamaño de fuente: 1.25EM, eso se convierte en 20px. Un elemento infantil dentro de él establecido en 1.5EM ahora será 30px (1.5 × 20px), no 24px, porque se basa en el padre, no en la raíz.

Este efecto compuesto es poderoso para el espacio escalable alrededor del texto. Pero si sigue anidando elementos con tamaños de fuentes basados en EM, sus valores pueden aumentar de tamaño rápidamente. Las unidades EM funcionan mejor para relleno, margen o elementos estrechamente vinculados al texto cercano. Para un tamaño constante en su diseño, considere usar REM en su lugar.

Las unidades REM mantienen las cosas simples

REM siempre mira el elemento HTML raíz. Establezca algo en 2REM y es del mismo tamaño en todas partes de su página.

La mayoría de los navegadores predeterminados a 16px para la raíz. Entonces 1REM = 16px, 2rem = 32px. Cambie el tamaño de la raíz y todo lo basado en REM escala juntos.

Las unidades de la visión sigan su pantalla

La escala de unidades de ventanas de ventanas gráficas con la ventana de su navegador. 50VW = mitad del ancho de la pantalla y 100VH = altura de pantalla completa. Esto es ideal para secciones de héroes que llenan la pantalla.

Los navegadores móviles generalmente no juegan bien con las unidades de ventanas gráficas. La barra de direcciones se esconde y muestra cuándo se desplaza, y su sección de 100 VH puede cortarse cuando aparece la barra de direcciones.

Vmin y VMAX comparan el ancho y la altura de su pantalla, luego eligen uno. Vmin usa lo que sea más pequeño. En un teléfono mantenido en posición vertical, el ancho es más pequeño, por lo que 50vmin = 50% del ancho. Gire al paisaje y la altura se vuelve más pequeña, por lo que 50 Vmin cambia al 50% de la altura. Vmax hace lo contrario: siempre elige la dimensión más grande. Esto es útil para elementos que necesitan escalar con la medición más grande.

Los porcentajes se adaptan a los contenedores

Los anchos basados en porcentaje siempre se relacionan con el ancho del elemento principal. Los porcentajes de altura pueden escalar de la misma manera, pero solo si el padre tiene una altura definida; De lo contrario, es posible que no funcionen como se esperaba.

Los porcentajes de acolchado y margen siempre se calculan a partir del ancho de los padres, incluso para los valores superior e inferior. Esto permite crear un espaciado constante y diseños proporcionales, especialmente en diseños de fluidos.

La diferencia

Las unidades absolutas son como una regla rígida, mientras que las unidades relativas se comportan más como una cinta de medición. Ambas miden las cosas, pero responden de manera muy diferente cuando las condiciones cambian. Así es como se comparan:

La mayoría de los desarrolladores terminan usando ambos: píxeles para las cosas pequeñas que necesitan mantenerse crujientes y relativas para las grandes piezas estructurales que necesitan flexionarse.

Elegir las unidades adecuadas para su diseño

Diferentes partes de su sitio web necesitan diferentes enfoques. Algunos elementos permanecen del mismo tamaño en todas partes, mientras que otros se adaptan según el tamaño de la pantalla o la configuración del usuario. La mayoría de los desarrolladores pensan demasiado. Hay una manera más directa: coincide con la unidad con lo que quiere que haga ese elemento.

Piense primero en sus usuarios

La gente navega por su sitio de manera inesperada. Alguien visita su teléfono. Su texto se ve pequeño, por lo que pellizcan para hacer zoom. Si construyó con unidades REM, todo crece juntos proporcionalmente. Si usó píxeles en todas partes, las cosas comienzan a superponerse y romperse.

La navegación principal necesita un tamaño consistente en las páginas. Las unidades REM lo atan al tamaño de la fuente base. Su logotipo necesita dimensiones exactas para la consistencia de la marca. Los píxeles lo mantienen crujiente.

Muchos usuarios cambian el tamaño de fuente predeterminado de su navegador para una mejor legibilidad. Cuando codificas los píxeles, ignoras sus preferencias. Si alguien se acerca al 125%, su diseño basado en píxeles se desmorona. Las unidades relativas se adaptan automáticamente.

Formas rápidas de elegir la unidad correcta

Aquí le mostramos cómo desglosar sus elecciones sin perderse en los detalles:

• Texto y espaciado a su alrededor: use EM o REM. Escamas de acolchado de botones con tamaño de texto. Los márgenes se mantienen proporcionales a los encabezados.
• Elementos relacionados con la pantalla: use unidades de visualización. Secciones de héroes que llenan la mayoría de las pantallas. Barras laterales que toman porcentajes de pantalla específicos.
• Elementos que necesitan control exacto: use píxeles. Bordes delgados que permanecen crujientes. Pequeños íconos con perfecta alineación. Deje caer sombras con compensaciones precisas.
• Elementos basados en contenedores: use porcentajes. Cuadrículas flexibles que se adaptan a los padres. Imágenes que se escalan con contenedores.

Empiece simple. Use píxeles para bits decorativos, REM para texto y espaciado relacionado, unidades de ventana gráfica para secciones del tamaño de una pantalla y porcentajes para contenedores flexibles. Elija un sistema para elementos relacionados y quédese con él.

Errores de la unidad CSS común para evitar

Eliges píxeles para todo porque se sienten seguros. Su botón se ve perfecto a 75 píxeles de ancho en su computadora portátil. Luego, alguien abre su sitio en su teléfono, y ese mismo botón come la mitad de la pantalla. Su logotipo necesita dimensiones exactas, pero sus áreas de contenido necesitan flexibilidad. Mezcle estos enfoques al azar y crea un caos. Entonces, aquí hay algunos consejos para evitar errores de unidades CSS estándar:

1. Picking píxeles para todo

Los píxeles se sienten seguros porque 20 píxeles significa 20 píxeles. Simple, ¿verdad? Su barra lateral de 300 píxeles funciona bien en el escritorio. En el móvil, se convierte en un bloque masivo que aplasta tu contenido en una tira delgada. Su texto de 16 píxeles se vuelve ilegible en pantallas de alta densidad.

Cuando alguien aumenta el tamaño de fuente de su navegador, su diseño basado en píxeles no se adapta. El texto desborda los contenedores. Los botones desaparecen detrás de otros elementos. Su barra lateral se bloquea en su contenido principal.

Guarde píxeles para cosas que realmente necesitan control exacto: bordes delgados, pequeños iconos y sombras de caída. Para todo lo demás, intente usar unidades relativas.

2. Unidades em que se multiplican fuera de control

Las unidades EM escala en función del tamaño de fuente de sus padres. Eso suena flexible, hasta que comienzas a anidar. Digamos que su contenedor usa 1.2EM, y su cabeceo dentro de él usa 1.5EM. Ese encabezado se convierte en 1.8EM en relación con la raíz porque 1.2 × 1.5 = 1.8. Sigue anidando y los tamaños pueden bola de nieve. Cambie un tamaño de fuente de padres, y todo lo que se mueve aguas abajo.

Las unidades REM arreglan esto. Siempre hacen referencia al elemento raíz, por lo que 2rem significa lo mismo sin importar dónde se use. Eso hace que su tipografía sea más fácil de escalar y controlar.

3. Unidades de ventanas de ventanas gráficas que saltan sobre el móvil

Establezca su sección de héroes en 100 VH, y llena la pantalla perfectamente. Excepto que los navegadores móviles se esconden y muestran sus barras de dirección cuando se desplaza. Safari en iOS y Chrome en Android todo hace esto. Cuando la barra de direcciones desaparece, su sección de 100 VH de repente se vuelve demasiado alta. Cuando reaparece, su contenido se corta.

La nueva unidad DVH se adapta al tamaño cambiante de la ventana gráfica. Sin embargo, el soporte del navegador todavía se está poniendo al día. Como retroceso, una solución JavaScript que usa CSS personalizó Propiedades.

Romper la accesibilidad con tamaños fijos

Los usuarios a menudo ajustan el tamaño de fuente predeterminado de su navegador para mejorar la legibilidad. Cuando codifica el texto, los botones y el espacio utilizando píxeles fijos, su diseño puede romperse: el texto puede desbordarse, los botones pueden volverse inutilizables y los elementos críticos pueden desaparecer a niveles de zoom más altos.

Se recomienda que los objetivos táctiles sean al menos 44 × 44 píxeles CSS, de acuerdo con las pautas de accesibilidad como WCAG y los estándares de Apple. Los objetivos más pequeños pueden ser desafiantes para que los usuarios con discapacidades motoras aprovechen con precisión.

En lugar de bloquear en tamaños fijos, use unidades escalables como REM para crear diseños que respeten las preferencias del usuario. Establezca el tamaño de su fuente base en el elemento, luego escala constantemente encabezados, botones y espacios con unidades relativas en su sitio.

5. Texto pequeño en pantallas de alta densidad

Diferentes dispositivos empacan píxeles de manera diferente. La pantalla de su teléfono puede tener 400 píxeles por pulgada, mientras que su monitor tiene 100. El mismo recuento de píxeles se ve completamente diferente en cada dispositivo.

Su texto de 14 píxeles se ve bien en un monitor de escritorio. En una pantalla de teléfono de alta densidad, esos mismos 14 píxeles se vuelven microscópicos. Los usuarios entrecieran y pellizcan para hacer zoom.

Los sistemas operativos y los navegadores manejan la escala automáticamente cuando usa unidades relativas. Su texto 1REM se hace más grande en pantallas de alta densidad y más pequeño en las de baja densidad.

6. Mezclar unidades sin un plan

Usas REM para algunos encabezados, EM para otros y píxeles para el texto del cuerpo. Su diseño carece de ritmo porque diferentes elementos se escalan a diferentes tasas. Elija un sistema para elementos relacionados. Si sus encabezados usan REM, todos sus encabezados deben usar REM. Si su espacio usa EM, siga usando EM para un espacio relacionado.

Pruebe sus opciones en dispositivos y configuraciones de usuario. Verifique cómo se ve su diseño cuando alguien aumenta su tamaño de fuente. Unos minutos de pruebas ahorran horas de correcciones de errores más tarde.

Cómo las unidades avanzadas de Divi 5 simplifican la gestión de CSS

La lucha libre con unidades CSS envejece rápidamente. Pasas horas ajustando valores, probando en diferentes dispositivos y arreglando diseños rotos. Divi 5 cambia esto por completo. El nuevo sistema saca las conjeturas de la selección de la unidad y le brinda control visual sobre el comportamiento receptivo sin tocar el código. Pero primero, entendamos qué es Divi.

¿Qué es Divi?

Divi es un constructor de sitios web que convierte a WordPress en algo que realmente tiene sentido para las personas que quieren que sus sitios se vean bien.

Arrastre cualquiera de los 200+ módulos alrededor de su página. Cambie el texto justo donde se sienta. Elija nuevos colores y viéndalos aparecer de inmediato. Estás trabajando en lo real, no en un modo de vista previa que te quede.

El tema incluye más de 2000 diseños que no apestan. Diseños reales para restaurantes, fotógrafos, consultores y docenas de otras empresas. Encuentra uno que te guste y ajustarlo hasta que se sienta bien.

El constructor de temas te permite controlar todo. Cree encabezados que no se vean genéricos, creen páginas de blogs destacadas y conviertan sus 404 páginas en algo que la gente realmente quiera ver.

Cree sitios web utilizando AI

Divi AI funciona justo dentro de su área de diseño. ¿Necesitas texto? Lo escribe.

¿Quieres imágenes? Los hace. Incluso puede describir las ediciones de fotos, y maneja el trabajo.

Del mismo modo, para código y nuevas secciones.

Los sitios rápidos de Divi resuelven ese momento terrible cuando miras una página vacía sin idea de dónde empezar. Elija entre sitios de inicio que nuestro equipo realmente diseñó, completo con imágenes originales y obras de arte.

O describa su negocio a Sitios rápidos de Divi + Divi Ai y déjelo construir algo desde cero.

Estos sitios construidos por IA tendrán titulares reales, copias e imágenes que coinciden con lo que le dijiste. Genere todo con IA, tome fotos de Unsplash o deje caer a los marcadores de posición para sus propios tomas. Establezca sus fuentes y colores primero, luego deje que la IA trabaje a su alrededor. Todavía puedes editar todo después.

¿Qué hay de nuevo en Divi 5?

Divi 5 reconstruye todo desde cero. Descartamos el antiguo sistema de código corto y creamos algo que funcione mejor con los estándares web de hoy. Los sitios se cargan más rápido, el editor responde más rápido y obtendrá acceso a herramientas que antes eran imposibles.

Pero, ¿qué hay de nuevo? Echa un vistazo:

Sistema de diseño de Flexbox

La creación de sitios web modernos y receptivos en Divi ahora es más rápido e intuitivo. Hemos introducido un sistema de diseño FlexBox completo en Divi 5, dándole controles simples para alineación vertical, envoltura de contenido y espaciado. Cree los diseños exactos que desee sin luchar con el código o el uso de soluciones complejas.

Presets del grupo de opciones

Los preajustes del grupo de opciones le permiten guardar estilos que puede mezclar y combinar en cualquier lugar. Haga un estilo de sombra una vez, luego úselo en botones, tarjetas, secciones, lo que sea que lo necesite. Actualice el preajuste y todo cambia instantáneamente en todo su sitio.

Variables de diseño

Los colores de la marca, las fuentes y el espaciado viven en un lugar ahora. Puede cambiar de azul a verde editando una variable. Su sitio completo se actualiza automáticamente, por lo que no tendrá que cazar a través de docenas de módulos.

Unidades avanzadas

Ahora, puede usar todas las unidades CSS avanzadas con Divi 5: de PX a VW/VH. Las funciones de CSS también funcionan bien en el constructor ahora. ¿Quieres una sección que sea el 80% de la altura de la pantalla menos tu encabezado? Escriba Calc (80VH - 100px) y estará configurado. La interfaz maneja Clamp (), Min (), Max (): todos esos trucos receptivos.

Filas anidadas

Las filas entran en otras filas ahora, lo más profundo que necesite. Construya diseños de revistas complejas o páginas de productos detalladas sin luchar contra la estructura. Cada nivel le brinda control total sobre el espacio y el comportamiento del dispositivo.

Edición de un solo clic

Punte y haga clic en cualquier lugar de su página para comenzar a editar. Los días de búsqueda de pequeños botones de edición o navegar a través de múltiples menús están detrás de nosotros.

Puntos de interrupción personalizables

En lugar de estar atascado con tres, los puntos de interrupción personalizables de Divi 5 le permiten habilitar siete tamaños de pantalla diferentes. Establezca cada punto de interrupción exactamente donde su diseño lo necesita, ya sea 1200px para monitores grandes, 900px para tabletas o 650px para teléfonos.

Espacio de trabajo de múltiples paneles

Organice los paneles de su espacio de trabajo como desee. Mantenga múltiples paneles de configuración abiertos simultáneamente en lugar de saltar constantemente entre diferentes áreas de interfaz.

Gestión de atributos

Copie elementos específicos entre diferentes partes de su sitio con precisión quirúrgica. Agarra solo el espacio de un elemento, solo los colores de otro, o solo los presets de un tercio. No más transferencias de todo o nada.

Escala de lienzo

Ajuste el tamaño de su espacio de trabajo para obtener una vista previa de cómo aparece su sitio en diferentes dispositivos. Consulte las vistas móviles, de tableta y de escritorio sin cambiar a modos de vista previa separada.

Mejoras de rendimiento

Todo se siente más rápido ahora. Las páginas se cargan más rápido, el constructor responde más rápido y los diseños complejos no empantanan la interfaz como solían hacerlo.

Grupos de módulos

Punte múltiples módulos en un contenedor. Trate los bloques de texto, las imágenes y los botones como una sola unidad. Muévalos juntos, enséñelos y copie todo a otras páginas.

Sistema de color HSL

Construya esquemas de color con controles de tono, saturación y ligereza. Cree variaciones de color de marca que parezcan profesionales. Las matemáticas crean combinaciones agradables automáticamente.

Más están en camino ...

• BOOC Builder: cree plantillas para repetir contenido como cuadrículas de blogs o listados de productos. Diseñelo una vez, deje que el sistema lo llene con su contenido real.
• Módulos de WooCommerce: módulos específicos de la tienda para cuadrículas de productos, páginas de productos individuales y funcionalidad de carrito. Todo lo que las tiendas en línea necesitan, construidas específicamente para la venta.

Usar variables CSS en Divi 5

El estilo del sitio web se vuelve tedioso cuando necesita valores consistentes en múltiples elementos. Las variables CSS resuelven esto almacenando valores reutilizables en una ubicación. Divi 5 admite tanto las variables CSS tradicionales como su propio sistema de variables de diseño, lo que le brinda flexibilidad en la forma en que administra la apariencia de su sitio.

Divi 5 acepta cualquier unidad CSS directamente en sus campos de entrada. Escriba valores REM, VW o porcentaje donde anteriormente solo podía usar píxeles. El constructor procesa estas unidades inmediatamente sin configuración adicional.

Las funciones de CSS funcionan de la misma manera. Ingrese la abrazadera (1REM, 4VW, 3REM) para la tipografía de fluidos o Min (500px, 90%) para anchos receptivos. El Visual Builder maneja estos cálculos en tiempo real mientras diseña.

Las variables se integran sin problemas con este sistema. Defina una variable CSS como-Header-Height: 80px, luego haga referencia a ella usando var (–Header-aguja) en cualquier campo. Divi reconoce la sintaxis y aplica su valor almacenado automáticamente.

Esta integración directa significa que puede mezclar unidades tradicionales, funciones modernas de CSS y variables dentro del mismo proyecto. Use píxeles para fronteras, unidades de ventanas gráficas para secciones y variables para mediciones repetidas.

Variables de diseño: una mejor manera de aplicar unidades avanzadas

Las variables de diseño son la alternativa incorporada de Divi 5 a las variables CSS. Trabajan completamente a través de la interfaz visual sin requerir ningún conocimiento del código. Usted crea y administra estas variables utilizando el panel Variable Manager de Divi.

Estas variables se extienden más allá de los números y colores simples. Almacene las URL de imagen completas, el contenido de texto o los valores de estilo complejos. Cuando actualiza una variable de diseño, cada elemento que lo usa cambia instantáneamente en todo su sitio web.

Divi 5 ofrece varios tipos variables para manejar diferentes necesidades de contenido:

• Las variables de color almacenan códigos hexadecimales, gradientes, colores de marca, colores de texto, fondos y bordes.
• Las variables de fuentes gestionan la tipografía a nivel mundial más allá de las limitaciones de personalización del tema y funcionan para cualquier área de texto.
• Las variables numéricas aceptan cualquier unidad CSS más funciones CSS como Clamp (), Calc (), Min () y Max () para espaciar, dimensionar y animación.
• Las variables de imagen almacenan imágenes reutilizables como logotipos, fondos y patrones.
• Las variables de texto almacenan cadenas de texto reutilizables como información de contacto, lemas y detalles comerciales.
• Las variables de URL almacenan enlaces reutilizables para redes sociales, afiliados, promociones y enlaces Tel/Mailto.

Configuración de unidades CSS con variables de diseño de números

Las variables numéricas le dan los bloques de construcción para diseños que se mantienen consistentes. Funcionan mejor cuando repites la misma medición en diferentes elementos. Además, son mucho más simples que la lucha libre con el código CSS.

Encuentre el Administrador de variables en su interfaz Divi. Cree una nueva variable de número y le dé un valor que se ajuste a su diseño. Use nombres claros como "botón de botón" o "sección de sección" en lugar de etiquetas vagas.

Creando su biblioteca de variables

Puede agregar variables comunes, como:

• "Botón de altura" en 3REM-Escala de botones con tamaño de texto
• "Padre de sección" a 8VH-El espacio se adapta a la altura de la pantalla
• "Border-Radius" a 0.5rem: las esquinas redondeadas permanecen proporcionales
• "Hero-Height" en 75VH-Secciones de héroe llenan la mayoría de las pantallas
• "Fino-borden" a 1px-Las líneas nítidas se mantienen afiladas
• "Texto fluido" en Clamp (1REM, 2.5VW, 2REM)-Texto escala suavemente
• "Content-width" en Min (90%, 1200px): los contenedores se mantienen legibles
• "Dynamic-Gap" en Calc (2REM + 2VW)-El espacio crece con el tamaño de la pantalla

Aplique estos en su módulo, sección o configuración de fila.

Sus variables REM escala con tamaño de texto. Las unidades VH se adaptan a pantallas más pequeñas. Las variables con Clamp () se ajustan automáticamente entre sus valores mínimos y máximos.

Edificio Presets conectados

Después de diseñar su elemento con variables, guarde el espaciado como un grupo de opciones preestablecido. Este preajuste ahora tiene referencias a sus variables numéricas.

Cuando aplica este preajuste a otros módulos, heredan el mismo espaciado basado en variables. Actualice "Tarjetas" de 2REM a 3REM en el Administrador de variables, y cada elemento utilizando automáticamente esa actualización preestablecida.

El preajuste permanece igual, pero los valores cambian. Esto funciona para todas las variables de diseño: colores, fuentes, imágenes, texto y URL. Sus preajuste se vuelven dinámicos en lugar de estáticos, lo que hace que las actualizaciones de todo el sitio tengan un solo cambio.

Cree mejores sitios web con unidades CSS y Divi 5

Obtener las unidades CSS correctamente cambia la forma en que crea sitios web. Arreglará menos diseños rotos y creará diseños que funcionan en los dispositivos. Píxeles Detalles precisos de uñas. Las unidades relativas se adaptan a diferentes pantallas y preferencias de usuario.

Divi 5 hace que el edificio con unidades CSS avanzadas sea muy fácil. Escriba cualquier unidad en el constructor y vea los resultados al instante. Las variables de diseño mantienen las mediciones consistentes en todo su sitio. Cambie un valor, y todo conectó las actualizaciones automáticamente.

Sus sitios web merecen mejor que las batallas de punto de ruptura y las correcciones de diseño interminables. Pruebe Divi 5 y vea las unidades CSS convertir las sesiones de diseño frustrantes en flujos de trabajo suaves.