Usando min () y max () en Divi 5 para crear diseños inteligentes

CSS Min () y Max () son dos funciones versátiles pero subutilizadas en el diseño web receptivo, y Divi 5 tiene soporte total para ambos desde la actualización de unidades avanzadas. Si bien hemos explorado previamente la tipografía de fluidos con Clamp () y los cálculos dinámicos con Calc (), Min () y Max () le brindan formas aún más simples de lograr un diseño receptivo.

En esta publicación, le mostraremos cómo usar estas funciones usando Divi (Divi 5 está listo para que usted lo use en nuevos sitios web, con una recomendación para la migración para los sitios existentes próximamente). Cualquier cosa que pueda hacer para usar funciones receptivas reducirá su dependencia de las consultas de los medios, ¡CSS es algo hermoso!

CSS Min () y max (): diseños más inteligentes con una lógica más simple

Si ya has explorado Clamp (), estás a medio camino de dominar Min () y max ()! Si recuerda, Clamp () usa tres valores simultáneamente (Min, Preferidos y Max), Min y Max en Clamp () es el mismo concepto pero con solo 1/3 de la lógica en un momento dado.

¿Qué hacen Min () y Max ()?

Las funciones min () y max () le permiten establecer dos o más valores, con el más pequeño (min) o el más grande (máximo) que se muestra en función del tamaño de la pantalla.

El "punto de transición" se determina respectivo de los dos valores que establece, por lo que esto es solo para fines de visualización

Min (): siempre elige el valor más pequeño

Use min () para evitar que las pantallas anchas estire el contenido en exceso. Esto es ideal para diseños que no deberían crecer demasiado en pantallas grandes, pero que deberían tener mucha flexibilidad para escalar hacia abajo a medida que los tamaños de pantalla se hacen más pequeños.

 width: min(100%, 500px); 

En este ejemplo, el ancho del elemento nunca excederá 500px, pero será 100% si está bajo esa marca de 500 px.

max (): siempre elige el valor mayor

Use Max () para evitar que el contenido se vuelva demasiado estrecho o pequeño, particularmente en pantallas más pequeñas o cuando el contenido necesita un tamaño mínimo para permanecer legible o funcional. Esto es ideal para diseños que no deberían reducirse más allá de cierto punto en pantallas pequeñas (un valor fijo) pero que pueden expandirse para acomodar espacios más grandes (con un valor relativo).

 width: max(80%, 300px); 

En este ejemplo, el ancho del elemento siempre será la opción más grande: 80% de su contenedor o 300px. En pantallas más pequeñas o en contenedores apretados, si el 80% calcula a menos de 300 px, el elemento seguirá siendo de al menos 300 px de ancho. En las pantallas más grandes, el elemento se expandirá al 80% del ancho del contenedor, pero nunca se encoge por debajo de 300px. Este enfoque ayuda a garantizar que el elemento se pueda usar en pantallas pequeñas mientras se amplía de manera contenida en las más grandes.

¿Por qué combinar valores relativos y fijos en min () y max ()?

Cuando encuentre por primera vez Min () o max () en CSS, puede preguntarse por qué a menudo combinan valores como un porcentaje y un píxel. Esto se debe a que cada tipo de unidad juega un papel diferente en el diseño receptivo.

Por ejemplo, Min (100px, 200px) siempre se resolverá a 100px. Es solo elegir el más pequeño de dos valores fijos. Pero cuando mezcla unidades, como Min (100%, 500px), le está diciendo al navegador: "Use lo que sea menor entre el 100% del ancho de los padres y 500px". Esto lo hace receptivo.

Las unidades relativas como %, VW y EM se ajustan en función del contexto, ya sea el elemento principal, la ventana gráfica o los tamaños de fuente heredados. Las unidades fijas como PX permanecen constantes en CSS, haciéndolas predecibles.

Al combinar valores fijos y relativos, Min () y Max () le permiten construir diseños flexibles que se adapten mientras que siguen haciendo cumplir los límites de tamaño.

Cómo usar min () y max () con divi

Ahora que hemos cubierto los conceptos básicos de Min () y Max (), discutamos algunos ejemplos.

1. Anchos de fila receptivos con menos campos

Siempre ha podido establecer un ancho y un ancho máximo en elementos de contenedores con Divi. Pero al abrir funciones CSS como Min () y Max () puede hacer lo mismo, pero usar un campo de diseño menos (y obtener un poco menos de CSS en su página también).

En Divi, si va a un elemento (en nuestro caso, una fila), la pestaña de diseño , y luego al dimensionamiento , encontrará un par de opciones para ajustar el ancho. Al hacer el ancho del 95% y establecer el ancho máximo en 900px, tiene algo que se ve bien en los dispositivos móviles, pero también le da un diseño con mucho espacio negativo a la izquierda y a la derecha para pantallas de escritorio.

Esto es como usar CSS como este para las filas:

 .container {
width: 95%;
max-width: 900px;
} 

Con las unidades avanzadas de Divi 5, ahora tiene otra opción más consolidada. Puede ingresar todo lo que necesita dentro del campo de ancho y lograr el mismo resultado.

Esto es como usar este CSS en el contenedor de fila:

 .container {
width: min(95%, 900px);
} 

Es una línea de CSS versus dos líneas. Más importante aún, requiere un paso y valor menos cada vez que use Min () en lugar de establecer un ancho y un ancho máximo. Cualquiera de las opciones logra el mismo resultado que se demuestra en este video:

Este caso de uso particular no es tan emocionante, pero muestra el poder de Min () y max () y cómo puede reemplazar las declaraciones de CSS más antiguas.

Al usar min () o max () para espaciar, dimensionar o bordes (se pueden usar en más campos en Divi 5), le recomiendo que los establezca en cualquier grupo de opciones preestablecidos o preestablecidos de elementos. De esta manera, puede obtener una escala constante sin importar dónde los use.

2. RODE RODE Y ANCHO BORDER

A continuación, tengo un diseño que garantiza más acolchado interno y un ancho de borde más grande a medida que los tamaños de pantalla se hacen más grandes. Para acomodar esto, he usado la función max () para configurar el ancho de borde derecho/izquierdo/superior/inferior y acolchado en una fila. El CSS sería algo como esto:

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

Esto significa que la función max () elegirá la que sea mayor en cualquier situación a la que se aplique. El relleno más pequeño en cada lado es de 10 px y el más grande es 2 VW. Del mismo modo, para el ancho de la frontera, el más pequeño que será es 5px, y el más grande es 1 VW).

Esto es lo que se ve max () en esta situación en el diseño> espaciado> relleno en la fila en divi:

Esto es lo que se ve max () en esta situación en diseño> borde>ancho de bordeen la fila en divi:

Juntos, tengo el efecto de tener menos relleno en el interior de la fila y un ancho de borde más delgado en pantallas más pequeñas. Pero se escala a medida que los tamaños de pantalla se hacen más grandes y el valor VW (recuerde, es un valor relativo) se vuelve más grande que el valor de píxel fijo.

Esto ayuda a maximizar la disponibilidad de pantallas más pequeñas, mientras que las pantallas más amplias pueden llenar más el espacio.

3. Secciones de héroes de altura completa

Usando el valor min () en la altura de una sección, puede crear una sección de héroe que tenga al menos una cierta altura, pero de lo contrario se ajusta al 90% de la altura de pantalla completa (y no más) usando una función Min () simple.

 height: min(800px, 90vh) 

Esto tiene el efecto de tener una sección de héroe de altura completa, excepto en pantallas más grandes (más altas), que luego mostrarían la siguiente sección debajo de ella. En la configuración de dimensionamiento de divi, esto se puede hacer con dos entradas de campo diferentes (ancho y ancho máximo), pero utilizando la función min (), podemos obtener el mismo efecto usando solo un campo en el tamaño.

Mantiene la sección del héroe como lo principal para la mayoría de los tamaños de pantalla, pero no se vuelve demasiado grande en los pocos casos con resoluciones de pantalla más altas.

4. Dimensionamiento de fuentes

El uso de Min o Max para los tamaños de fuentes puede ayudarlo a lograr un tamaño más dinámico que los valores de píxeles estáticos. Para esto, desea usar Max () para ampliar el tamaño de la fuente según las condiciones del tamaño de la pantalla. Establezca el valor Pixel/REM en el pequeño tamaño absoluto que desea usar y use un valor relativo para escalar hacia arriba.

1REM es igual al tamaño de fuente de raíz (típicamente 16px a menos que se personalice en los estilos de su sitio); Un tamaño de fuente de Max (1REM, 2VW) tomaría el mayor de los dos valores y nunca sería menor que 16px.

Como puede ver, en los dispositivos más pequeños, el tamaño de fuente se establece en 1REM/16PX. En cierto punto, el valor más grande se convierte en 2 VW y escala el tamaño de fuente hacia arriba, haciendo que la fuente sea más grande a medida que los tamaños de pantalla se hacen más grandes.

Para el tamaño de la fuente, no recomiendo usar Min o Max, sino sujetar (). Min/Max solo le brinda una escala dinámica en una sola dirección, y para acercarse al efecto de Clamp (), necesitaría establecer sus reglas de dimensionamiento de fuentes Min/Max en múltiples puntos de interrupción (lo cual es posible pero mucho más fácil simplemente usar Swramp).

Diferencia entre min ()/max () y sujeción ()

Puede entender la clamp () como una combinación de min () y max () con un valor preferido en el medio. Clamp () toma un valor para el límite mínimo, un valor como el límite máximo y un tercer valor (en el medio) como el valor preferido que determina la pendiente de cambio entre su min y máximo.

Un ejemplo:

 font-size: clamp(16px, 4vw, 40px); 

Esto significa que el tamaño de fuente que está configurando nunca será más pequeño que 16px o más de 40 px. Sin embargo, la velocidad que cambia (según el tamaño de la pantalla) está determinada por el valor preferido en el centro.

Lea mi artículo dedicado sobre el uso de Clamp () para ver mi generador de tipografía de fluido preferido que crea sus funciones Clamp () para usted.

Prueba min () y max () con divi 5

Min () y max () podrían no recibir tanta atención como Clamp () o Calc (), pero son herramientas esenciales para diseños más inteligentes, más simples y más limpios y más limpios en Divi 5.

Estas funciones de CSS le brindan formas únicas de controlar la capacidad de respuesta de su sitio web. Una vez que comprenda cuándo usar min () y max (), se preguntará cómo administró el diseño receptivo sin ellos. Son totalmente apoyados en los navegadores modernos, y Divi hace que la implementación directamente. Divi 5 está listo para ser utilizado en nuevos sitios web.