Una guía para comprender y aplicar unidades de longitud CSS en Divi

Resumen rápido de unidades de longitud

Las unidades de longitud a menudo se dividen en dos categorías principales: absolutas y relativas.

Unidades de longitud absoluta

Las unidades de longitud absoluta se consideran absolutas porque no son relativas a ningún otro elemento. Estas unidades no se adaptarán al tamaño del navegador y siempre tendrán el mismo tamaño. Estos incluyen lo siguiente:

pt – puntos

px – píxeles

en – pulgadas

cm – centímetros

mm – milímetros

pc – picas

Los píxeles son realmente la única unidad de longitud CSS absoluta que deberíamos considerar usar para la web. Los otros se utilizan principalmente para la medición física (no digital) (como la impresión). Una unidad de píxel se refiere al tamaño de un «punto» de la pantalla de su dispositivo (que variará ligeramente con cada dispositivo). Debido a esto, los píxeles se usan comúnmente para cosas que no necesariamente necesitan escalar con los tamaños del navegador.

Unidades de longitud relativa

Las unidades de longitud relativa se consideran relativas porque cambian/se escalan según la longitud de otros elementos. Un ejemplo común es el porcentaje, que depende de la longitud del elemento principal.

em – relativo al tamaño de fuente del elemento

rem – relativo al tamaño de fuente del elemento raíz

vw – relativo al 1 % del ancho de la ventana de visualización de su navegador

vh – relativo al 1 % de la altura de la ventana de visualización de su navegador

vmin – relativo al 1 % de la más pequeña de las dos dimensiones de la ventana gráfica del navegador (alto o ancho).

vmax: relativo al 1 % de la mayor de las dos dimensiones de la ventana gráfica del navegador (alto o ancho).

%: relativo a 1/100 del ancho del elemento principal.

Todas estas unidades se utilizan para la web. Para esta publicación, no me concentraré en rem, vmin o vmax porque son menos comunes y no funcionan tan bien con Divi. Aunque me encantaría escuchar casos de uso sugeridos.

Tamaño de la caja de Divi

Divi determina el tamaño del cuadro con la propiedad CSS border-box. Básicamente, esto significa que el ancho y el alto de una sección, fila o módulo están determinados por la suma de su contenido, relleno y borde. Si ha creado sitios web con Divi, ya sabe cómo funciona. Piense en una fila como una caja.

Digamos que crea una fila que tiene un ancho de 1000 px. Agregar contenido a la fila (como otros cuadros/módulos) no cambiará el ancho de la fila. Agregar relleno a la fila tampoco cambiará el ancho de la fila, pero se aplicará dentro del cuadro. Si agrega un borde a la fila, el borde también se aplicará dentro del cuadro y no afectará el ancho establecido. En otras palabras, agregar 50 px de relleno derecho e izquierdo no dará como resultado una fila de 1100 px, al igual que agregar un borde de 10 px alrededor de su fila no hará que su fila tenga 1020 px de ancho. Lo único que cambiará es la altura a medida que agrega más relleno o borde de contenido. El margen es lo que agrega espacio fuera del cuadro y es lo que se usa para separar cuadros (secciones, filas y módulos) en la página.

Menciono esto porque es útil comprender el bloque de construcción (o los cuadros) de cómo funciona Divi para que pueda saber qué significa realmente agregar valores de unidad de longitud (30px, 5em, 50%, etc.) a los elementos en su página.

Ancho

Unidades de longitud sugeridas: %, vw y px (como ancho máximo)

La propiedad de ancho utiliza unidades de longitud para establecer el ancho de un elemento.

Divi te permite ajustar fácilmente el ancho de cualquier sección, fila o módulo.

Usando px para Ancho

Rara vez debe establecer un elemento en un ancho de píxel, a menos que planee ajustar ese ancho en los puntos de interrupción necesarios para dispositivos móviles. Esto simplemente no es una buena práctica en el mundo del diseño receptivo, adaptable y fluido. Sin embargo, es útil establecer un ancho máximo utilizando un valor de píxel, siempre que el ancho se establezca en un porcentaje. Más sobre esto más adelante.

Uso de % y px para ajustar el ancho máximo para un diseño receptivo

Como sabes, Divi te permite ajustar el ancho de cualquier módulo, fila o sección. Este ancho será ajustable por una unidad de porcentaje de forma predeterminada, pero también puede ingresar un valor de unidad de píxel. Pero el valor de ancho establecido es técnicamente el ancho máximo. El verdadero ancho CSS real es 100%. Todas las secciones, filas, columnas y módulos tienen inherentemente un 100 % de ancho porque todos se crean utilizando el elemento de bloque div. Y los elementos de bloque siempre abarcan todo el ancho del contenedor (100 % del ancho).

Qué sabes… Divi está construido con Divs.

Aquí hay una pequeña prueba. Actualicemos el ancho del módulo a 1000 px para este módulo de texto en la columna izquierda. Le he dado al módulo un fondo gris para reconocerlo fácilmente.

Tenga en cuenta que en realidad no alcanza los 1000 px completos porque técnicamente es un ancho máximo. Sin embargo, si quisiera anular el ancho predeterminado del 100 % y declarar un ancho real de 1000 px, podría ir a la pestaña avanzada y configurar el elemento principal para que tenga un ancho de 1000 px.

Ahora mira el módulo.

El problema es que estás usando un valor absoluto rodeado de elementos con valores relativos. Entonces, incluso si reduce su navegador, el módulo seguirá siendo de 1000px.

Es por eso que Divi ajusta el ancho máximo de sus elementos en lugar del ancho real.

Es común usar píxeles en combinación con unidades de longitud relativa (como porcentaje) para crear sitios receptivos. Divi utiliza este método para establecer el ancho del contenido de todas sus páginas. Si va a Personalizador de temas > Configuración general > Configuración de diseño, verá que el ancho del contenido principal está configurado en 1080 px.

El 1080px es en realidad el ancho máximo para su contenido. El ancho real de css es del 80%. Es por eso que cuando aumenta el ancho de su navegador, el ancho del contenido dejará de expandirse a 1080px. Y si reduce el ancho del navegador por debajo de 1080 px, el contenido continuará escalando de acuerdo con el 80 % del elemento principal.

Agregar valores de ancho personalizados en Divi Builder

Al usar el constructor Divi, sus filas se consideran el contenido del sitio web y heredarán una configuración predeterminada de 80% de ancho y 1080px de ancho máximo. Si cambia el ancho de una fila usando Divi Builder configurando un ancho personalizado, el nuevo valor de ancho será un ancho máximo, independientemente de si se establece como un porcentaje o un valor de píxel.

Si cambia una fila para que sea de ancho completo, tanto el ancho como el ancho máximo se establecen en 89%. Esto significa que la fila siempre tendrá un 89 % del elemento principal (la sección), que es el 100 % de la ventana del navegador.

En resumen, el constructor Divi es lo suficientemente inteligente como para usar automáticamente el ancho máximo al ajustar el ancho de sus secciones, filas o módulos.

Uso de vw para ajustar el ancho

El ancho de la ventana gráfica (vw) es muy similar al valor porcentual. La diferencia es que el valor de vw siempre es relativo al ancho de ventana/ventana del navegador. El valor porcentual siempre es relativo al elemento principal. Tenga cuidado al configurar sus secciones en 100vw (en css personalizado) porque esto puede causar algunos problemas al extenderse más allá de la barra de desplazamiento que aparece al desplazarse hacia abajo en la página.

Dado que Divi se basa en anchos porcentuales, a menos que esté creando un diseño especial que requiera vw, me quedaría con los valores porcentuales.

Margen

Unidades de longitud sugeridas: px, % y vw

La propiedad de margen usa unidades de longitud para agregar espacio fuera del elemento. También es útil para posicionar un elemento utilizando valores positivos y negativos.

Divi te permite ajustar el margen de cualquier sección, fila o módulo.

Usando px para márgenes

El uso de píxeles para los márgenes y/o el relleno está bien, siempre y cuando comprenda que esos valores de longitud no se ajustarán a sus diferentes tamaños de pantalla a menos que asigne valores de longitud específicos para diferentes tamaños de pantalla.

Evite usar píxeles para el margen izquierdo o derecho

En general, querrá evitar el uso de píxeles para ajustar los márgenes, especialmente para los márgenes izquierdo y derecho. Tener una longitud absoluta para los márgenes no se escalará correctamente con su contenido y, en última instancia, lo dejará con más o menos margen del que desea en ciertos anchos de navegador. Hay excepciones a esto en las que querrá tener márgenes absolutos para fines de diseño. Solo asegúrese de ajustar la longitud del margen para dispositivos móviles cuando sea necesario.

Uso de píxeles para el margen superior e inferior

Hay momentos en que usar píxeles para el margen es bastante útil. Por ejemplo, si desea mover un elemento hacia arriba o hacia abajo en una página, darle al elemento un valor de píxel positivo o negativo le permitirá mover ese elemento en una ubicación precisa verticalmente. Si tuviera que usar un porcentaje para esto, el elemento se moverá hacia arriba o hacia abajo a medida que cambia el ancho del navegador.

Uso de porcentaje para márgenes

Usar el porcentaje para los márgenes es una excelente manera de crear sitios que respondan. Como se mencionó anteriormente, los valores porcentuales son relativos a la longitud de los elementos principales. Divi usa porcentajes para el margen derecho para crear espacio entre columnas. Este porcentaje de margen se ajusta fácilmente cambiando el ancho de medianil dentro de la configuración de la fila. El ancho de medianil es básicamente el porcentaje de margen que desea entre sus columnas.

Con el ancho de medianil establecido en 3, el margen entre columnas es del 5,5 %. Observe cómo se escala el espacio al ajustar el ancho del navegador.

Entonces, si alguna vez necesita ajustar un margen derecho o izquierdo de un módulo, tenga en cuenta que será mejor usar porcentajes para mantener las cosas escalando adecuadamente.

Usar margen de porcentaje para colocar objetos horizontalmente

A veces, ciertos diseños creativos requieren mover objetos de izquierda a derecha para superponerlos o crear diseños asimétricos. En este caso, puede utilizar un valor de porcentaje negativo para un margen derecho o izquierdo. Esto moverá el objeto pero aún se ajustará a los anchos del navegador.

Este es un ejemplo del uso de valores porcentuales para superponer una imagen con otra imagen. Observe el uso de valores porcentuales para el posicionamiento horizontal y el uso de píxeles para el posicionamiento superior e inferior. Esto se debe a que el valor porcentual es relativo al ancho del elemento principal (la columna). Entonces, si pusiera un margen superior del 30%, la imagen se movería hacia arriba y hacia abajo a medida que cambia el ancho de la columna. Es por eso que en la mayoría de los casos querrá colocar elementos verticales con un valor de longitud absoluta como píxeles.

Usando vw y vh para Margen personalizado

Al igual que los porcentajes, las unidades de longitud vw y vh pueden ser útiles para agregar márgenes entre secciones, filas o módulos de una manera que se adapte a la ventana gráfica de su navegador. La diferencia es que vw y vh siempre son relativos al tamaño de la ventana gráfica, no al elemento principal (como los porcentajes).

Relleno

Unidades de longitud sugeridas: px, %, em, vw y vh

Divi te permite personalizar el relleno para secciones, filas, columnas y módulos.

Uso de píxeles para el relleno

Hubo un tiempo en el que usaba píxeles como relleno para casi todo. Pero, he llegado a mis sentidos. Al igual que el margen, puede usar píxeles para el relleno si desea tener una longitud absoluta de relleno sin importar el tamaño del navegador. Pero, en general, el relleno debe adaptarse al tamaño del navegador. Entonces, en cambio, sugeriría usar porcentajes para el relleno.

Es común en el diseño web receptivo usar píxeles para el relleno superior e inferior para mantener un espacio vertical constante entre los elementos mientras cambia el ancho del navegador. Divi hace esto para Secciones y Filas. Dependiendo de la altura de la sección o fila que seleccione (1-10) en el Personalizador de temas, su sección y/o filas tendrán un relleno superior e inferior mayor o menor.

Pero si observa el CSS, notará que el relleno superior e inferior se establece en un valor porcentual en un punto de interrupción determinado y un valor de píxel para otros. Por ejemplo, si deja la altura de la sección predeterminada en el valor de 4, en anchos de pantalla más grandes (más de 1350 px), el relleno superior e inferior será de 54 px. En anchos de pantalla entre 980 px y 1350 px, el relleno superior e inferior se establecerá en 4 % (que es el 4 % del ancho de la sección). En tamaños de pantalla inferiores a 980 px, el relleno superior e inferior se establece en 50 px. Esta técnica es excelente para establecer un valor de relleno mínimo para teléfonos inteligentes y un relleno máximo para monitores grandes mientras tiene la escala de relleno con el valor porcentual para dispositivos entre los dos extremos.

Uso de % para relleno

A veces, es mucho más fácil usar un valor porcentual (no píxeles) para el relleno a fin de mantener las cosas escalando bien sin necesidad de agregar valores adicionales en ciertos puntos de interrupción. Y, para aquellos de ustedes interesados ​​en mantener el contenido importante «en la mitad superior de la página», el uso de porcentajes en lugar de píxeles para el relleno superior e inferior ayudará a simplificar este proceso.

Este es un ejemplo de una sección con un relleno superior establecido en 50 px. Observe cómo el mismo relleno de 50 px no se ve tan bien en los teléfonos inteligentes como en el escritorio porque hay demasiado espacio entre las secciones.

Aquí hay un ejemplo de una sección con un relleno superior establecido en 4%. Observe lo bien que se escala desde el escritorio hasta el teléfono inteligente. En una ventana del navegador de 1920 px de ancho, el relleno superior es de 76 px (0,04 veces 1920). Pero cuando reduce la ventana del navegador a 375 px de ancho, el 4 % de relleno equivale a 15 px (0,04 x 375).

NOTA: Es importante recordar que los valores porcentuales superior e inferior siempre serán relativos al ancho del elemento, no a la altura.

Usando em para relleno

Usar el valor de longitud em para relleno es sorprendentemente útil. Supongamos que tiene un módulo de texto con un tamaño de cuerpo de texto de 22 px para escritorio, 18 px para tableta y 14 px para teléfono inteligente. 1em equivaldría a 22 px en una computadora de escritorio, 18 px en una tableta y 14 px en un teléfono inteligente. Quédate conmigo. Agregar un relleno de 2em para el módulo de texto se ajustará según el tamaño del texto. En el escritorio, el relleno será de 44 px porque 2 em serían 2 veces 22 px. En la tableta, el relleno será de 36 px. Y en el teléfono inteligente, el relleno será de 28 px. Esto ayuda a escalar el relleno de acuerdo con el tamaño de la fuente, lo que funciona muy bien para un diseño receptivo.

Uso de vh y vw para relleno

Puede usar vh y vw para el relleno de la misma manera que lo haría con el porcentaje. La diferencia es que vh y vw

siempre son relativos al tamaño de la ventana gráfica. El porcentaje siempre es relativo al elemento principal.

En este ejemplo, eliminé todo el relleno de la sección y la fila y le di a cada módulo de texto el siguiente relleno:

2vh arriba, 5vw derecha, 2vh abajo, 5vw izquierda

Observe cómo ajustar la altura del navegador disminuirá o aumentará el relleno superior e inferior de cada módulo.

Fronteras

Unidades de longitud sugeridas: px, em y vw

Uso de píxeles para los bordes

El uso de píxeles para los bordes es bastante común y se recomienda, a menos que desee escalar el borde de acuerdo con el tamaño de la fuente principal (em) o la ventana gráfica del navegador (vh, vw).

Los bordes no admiten la unidad %

Es posible que haya notado en el encabezado anterior que no incluí el porcentaje como una opción. Esto se debe a que el valor porcentual no es una unidad admitida para los bordes. Pero puede hacer que sus bordes se escalen usando las otras unidades de longitud relativa (em,vh,vw).

Usando em para bordes

Usar em para los bordes es similar a la idea de usar relleno alrededor de los módulos de texto. El valor em será relativo al tamaño de fuente principal y se ajustará a medida que cambie el tamaño de fuente.

Aquí hay un ejemplo de un módulo de texto con un borde de 1em. También le doy al módulo un relleno de 1em. Observe lo que sucede cuando ajusta el tamaño de fuente. El borde (y el relleno) cambiará a medida que aumente y disminuya el tamaño de la fuente.

Esto también funciona con los bordes de los botones. Este es un ejemplo de un botón con un ancho de borde de 0,5 em. Observe cómo se escala con el tamaño del texto del botón.

Uso de vw y vh para fronteras

Si desea escalar el ancho de su borde de acuerdo con el tamaño de la ventana gráfica de su navegador, puede usar la unidad de longitud vw o vh. No he visto esto hecho mucho, pero es interesante pensar en ello.

Texto

Unidades de longitud sugeridas: px, em y tal vez vw

The Divi Builder le permite agregar valores de longitud personalizados para personalizar su texto. Estas opciones incluyen tamaño de texto, espaciado entre letras y altura de línea.

Puede usar cualquiera de los valores de longitud de CSS para estas opciones de texto, pero para esta publicación voy a cubrir los más comunes: px, em y vw.

Usando px para el tamaño del texto

Es común establecer los tamaños de fuente en un valor de píxel porque desea que esos tamaños permanezcan consistentes. Todavía puede cambiar el tamaño de fuente de acuerdo con el ancho del navegador mediante consultas de medios. Divi hace que esto sea realmente fácil de hacer al permitirle ingresar tres tamaños de fuente de dispositivo diferentes dentro de todos los módulos Divi .

Uso de px para el espaciado entre letras

Es común usar px para el espaciado entre letras. Solo tenga en cuenta que si planea cambiar considerablemente el tamaño de su fuente entre dispositivos, probablemente también tendrá que ajustar el espacio entre letras. Para hacer que el espaciado entre letras sea escalable con el tamaño de su texto, puede usar el valor de longitud em en su lugar.

Usando px para altura de línea

La unidad px no es la mejor opción para la altura de la línea porque se convierte en una molestia cambiar la altura de la línea cada vez que cambia el tamaño de la fuente. Es por eso que normalmente se usa em (más sobre esto más adelante).

Usando em para tamaños de fuente

Puede usar em para tamaños de fuente personalizados. El valor de 1em será igual al tamaño de fuente de la etiqueta principal más inmediata. Al agregar un valor em a un elemento de texto en un módulo, el tamaño de fuente de la etiqueta principal más inmediato es el que haya configurado en el personalizador de temas. Entonces, en Divi, si tiene la fuente de su cuerpo establecida en 16px, 1em es igual a 16px, 2em es igual a 32px, y así sucesivamente.

Usando em para Line-Height

Digamos que está utilizando un módulo de texto y cambia la fuente del cuerpo a 18px. Dado que em siempre es relativo a la etiqueta principal más inmediata, el valor de em cambia para ese módulo y ahora 1em equivale a 18px. Esto es útil para comprender por qué Divi establece la altura de línea en un valor de longitud em. Si configura su fuente de texto de 18 px para que tenga un valor de 1,5 em, la altura de la línea se establecerá en 27 px (1,7 veces 18 px). Entonces, si decide cambiar el tamaño de fuente más adelante, la altura de la línea em se ajustará en consecuencia.

Usando em para el espaciado de letras

Usar em para el espaciado de letras puede ser útil y definitivamente lo recomendaría. La razón principal para usar em para el espaciado entre letras es que el espacio aumentará o disminuirá según el tamaño del texto.

Mire el espacio entre letras en la siguiente imagen. Observe cómo el espaciado entre letras de 5 px no cambia a medida que cambia el tamaño del texto del encabezado.

Ahora mire el mismo texto de ejemplo usando 0.1em para el espacio entre letras. Si el tamaño de fuente es de 50 px, 0,1 em equivaldrá a 5 px. Pero si reduce el tamaño de la fuente a 25 px, 0,1 em equivaldrá a 2,5 px.

Usando rem para elementos de texto

Generalmente, usar rem es más predecible que usar em porque siempre es relativo al tamaño de fuente raíz. El elemento raíz en su etiqueta html. Esta es la etiqueta que envuelve todo su sitio web. En Divi, el html está configurado para tener un tamaño de fuente del 100%. Esto puede parecer un poco extraño. Quiero decir, ¿100% de qué exactamente? En realidad, esta es una práctica bastante común. Puede que no lo sepa, pero configurar el tamaño de fuente de su raíz/html al 100 % es una forma de declarar el mismo tamaño de fuente que su navegador. La mayoría de los navegadores tienen un tamaño de fuente predeterminado de 16 px, por lo que, en Divi, el valor de 1 rem es en realidad 16 px (o el tamaño de fuente establecido en la configuración de su navegador). No es lo que ha establecido como texto de cuerpo predeterminado en el personalizador de temas.

Por ejemplo, observe lo que sucede cuando agrego 1 rem al tamaño del texto del cuerpo de un módulo de texto. El texto en realidad aumenta de tamaño de 14 píxeles (lo que he configurado como fuente del cuerpo del tema en el personalizador de temas) a 16 píxeles (el tamaño de fuente predeterminado de mi navegador).

Ahora, si cambio el tamaño de fuente de mi navegador a algo más grande, el texto en ese módulo de texto también aumentará.

Entonces, si está interesado en tener texto que se ajuste a la configuración del navegador de los usuarios, el valor rem puede ser útil. Pero, en su mayor parte, usar rem en Divi será más problemático de lo que vale, a menos que desee comenzar a cambiar el marco básico del tema Divi (es decir, cambiar el tamaño de fuente raíz a otra cosa).

Uso de vw para elementos de texto

Este es quizás el valor de longitud más interesante para usar en el texto. No voy a entrar en muchos detalles sobre las posibilidades aquí, pero les presentaré la idea.

El uso de vw para el tamaño de fuente le permite escalar completamente su texto con la ventana de su navegador. Esto puede ser útil si desea que la longitud de la línea permanezca constante.

Mire lo que sucede con este texto de título cuando ajusto el tamaño de la ventana/ventana de mi navegador. El título tiene un tamaño de texto de 15vw (que es el 15% de la ventana gráfica del navegador).

Si desea llevar esto un paso más allá, puede configurar un relleno personalizado para el título que se escalará automáticamente con el texto del título. Esto solo funcionará si aplica el relleno em a la etiqueta de título, por lo que deberá agregarlo al cuadro de título CSS personalizado en la pestaña avanzada.

Observe cómo el relleno por encima y por debajo del título se escala con el título.

Casos de uso especial

Uso de vh para crear encabezados de altura completa

El Módulo de encabezado de ancho completo tiene una opción para cambiar el diseño de su encabezado a pantalla completa. Esto asegura que su encabezado ocupe toda la pantalla cuando se carga la página, sin importar el tamaño de la pantalla.

Puede lograr este mismo efecto con cualquier sección usando el constructor divi. Todo lo que tiene que hacer es ir a la pestaña avanzada Configuración de sección e ingresar el siguiente CSS personalizado en el cuadro de entrada Elemento principal:

Si aún no lo ha adivinado, esto asegura que su sección abarque toda la altura de la ventana del navegador.

Uso de vw y em para crear botones escalables grandes

Si aún no lo sabe, el relleno predeterminado para los botones de Divi es el siguiente:

0.3em arriba, 1em derecha, 0.3em abajo, 1em izquierda

Pero puede cambiar esto ajustando el relleno del módulo de botones a algo como esto:

0,5 em arriba, 2,5 em derecha, 0,5 em abajo, 2,5 em izquierda

Su relleno personalizado se escalará con el tamaño de la fuente de su botón.

Luego puede cambiar el tamaño de su fuente a un valor de 4vw.

Esto mostrará un botón realmente grande en monitores grandes y se escalará muy bien a medida que ajusta la ventana de su navegador. Para evitar que el botón se reduzca demasiado en los teléfonos, puede establecer un valor de píxel para su botón para teléfonos inteligentes.

Otros recursos útiles

• Unidades de longitud CSS
• Las longitudes de CSS
• Secciones de CTA personalizadas usando vw
• Mejor diseño móvil
• Tipografía receptiva y fluida con unidades vh y vw

Revisemos. ¿Debemos?

Ancho: use porcentajes para anchos personalizados. Además, los píxeles son aceptables en el constructor Divi porque este es un valor de ancho máximo y mantendrá la capacidad de respuesta en dispositivos móviles.

Margen: dado que Divi ya usa porcentajes para agregar márgenes entre columnas en su cuadrícula de temas, tendría sentido seguir usando porcentajes a menos que tenga una razón específica para no hacerlo. También puede usar vw y vh para los márgenes siempre que comprenda lo que está haciendo.

Relleno: tiene muchas opciones que funcionan bien para el relleno. En general, usaría porcentajes para rellenar filas y secciones por consistencia. Pero los usaría para el relleno de módulos para escalar con tamaños de fuente. Los píxeles siempre son buenos para el relleno, pero en mi opinión, deben evitarse a menos que tenga una razón de diseño específica para hacerlo.

Tamaño de fuente: use píxeles para el tamaño de fuente personalizado. Em también es aceptable si desea que el tamaño de fuente sea relativo al tamaño de fuente principal, lo que facilita cambiar todos los tamaños de fuente cambiando el principal. Usar vw para el tamaño de fuente es una buena opción para encabezados o para aquellos diseños que necesitan texto para escalar con la ventana del navegador.

Espaciado de letras: use em para el espaciado de letras para que se escale cuando cambie el tamaño de fuente más adelante.

Altura de línea: use em para la altura de línea para que se ajuste al tamaño de fuente.

Bordes: no puede equivocarse al usar píxeles para los bordes, pero no ignore las otras opciones. El uso de em ajustará su borde al tamaño de fuente nativo (útil para los botones). Y usar vw para los bordes es una idea interesante.

Pensamientos finales

Afortunadamente, el constructor Divi tiene un montón de características integradas que te permiten crear hermosos sitios web receptivos sin tener que ser un experto en unidades de longitud de CSS. Sin embargo, es útil comprender qué unidades de longitud usar cada vez que decida realizar personalizaciones en su página. Hacer que su sitio se vea bien en todos los tamaños de pantalla es una necesidad absoluta y usar los valores de longitud correctos hará que su trabajo sea mucho más fácil en el futuro.

Espero que esta guía haya sido útil. Y como siempre, espero saber de usted en los comentarios.

¡Salud!