Unidades CSS personalizadas, min(), max() y clamp(): tres funciones lógicas de CSS

Unidades CSS personalizadas, min(), max() y clamp(): tres funciones lógicas de CSS

Tabla de contenido

Antes de comenzar con el artículo, te comparto un corto video de mi participación en la Meetup «Aplica nuevas funcionalidades de Elementor V3.10 y V3.11 con ejemplos prácticos» donde hablo de como podrías aplicar las unidades CSS personalizadas en Elementor PRO.

Las Unidades CSS personalizadas son una de las herramientas más útiles y poderosas que los desarrolladores web podemos utilizar para crear diseños y diseños web más dinámicos y adaptables. En particular, las unidades CSS min(), max() y clamp() son una manera útil y flexible de establecer valores numéricos en CSS.

La unidad min() es útil para establecer un valor mínimo en un estilo CSS. Por ejemplo, si desea que un elemento tenga un ancho mínimo de 300 píxeles, pero permita que el ancho se ajuste automáticamente según el tamaño de la pantalla, puede utilizar la siguiente declaración CSS:

width: min(300px, 100%);

En este caso, la anchura será de 300 píxeles si el ancho de la ventana gráfica es menor de 300 píxeles. Si la ventana gráfica es más ancha, la anchura será del 100% del ancho de la ventana gráfica.

La unidad max() funciona de manera similar a la unidad min(), pero establece un valor máximo en lugar de un valor mínimo. Por ejemplo, si desea que un elemento tenga un ancho máximo de 800 píxeles, pero permita que el ancho se ajuste automáticamente según el tamaño de la pantalla, puede utilizar la siguiente declaración CSS:

width: max(800px, 100%);

En este caso, la anchura será del 100% del ancho de la ventana gráfica si es más ancha que 800 píxeles. Si la ventana gráfica es más estrecha, la anchura será de 800 píxeles.

Finalmente, la unidad clamp() combina las unidades min() y max() para crear un valor que está dentro de un rango específico. Por ejemplo, si desea que un elemento tenga un ancho que esté entre 300 y 800 píxeles, pero permita que el ancho se ajuste automáticamente según el tamaño de la pantalla, puede utilizar la siguiente declaración CSS:

width: clamp(300px, 50%, 800px);

En este caso, la anchura será del 50% del ancho de la ventana gráfica si está entre 300 y 800 píxeles. Si la ventana gráfica es más estrecha que 300 píxeles, la anchura será de 300 píxeles. Si la ventana gráfica es más ancha que 800 píxeles, la anchura será de 800 píxeles.

Tengo un regalo para ti

Apúntate a la newsletter y recibirás GRATIS un pack exclusivo de plantillas para Elementor PRO

Unidades CSS personalizadas en Elementor

Muchos de los widgets de Elementor incluyen la posibilidad de cambiar el tamaño, el relleno o las márgenes a través de la unidades de medida como PX, EM, REM, % VW, VH. y por supuesto, cada vez necesitábamos configurar un tamaño teníamos que elegir alguna de estas unidades.

A partir de ahora podemos hacer uso de las funciones Min, Max, calc y Clamp de CSS con el objetivo de calcular matemáticamente los espacios

La tipografía fluida

La tipografía fluida es otro aspecto importante que se relaciona con el uso de unidades CSS personalizadas como min(), max() y clamp(). La tipografía fluida se refiere a la práctica de ajustar el tamaño de la fuente automáticamente en relación con el tamaño de la pantalla del usuario. Esto se logra mediante el uso de unidades de medida relativas, como em o rem, en lugar de unidades de medida fijas, como px.

Al combinar la tipografía fluida con el uso de unidades CSS personalizadas como min(), max() y clamp(), los desarrolladores web tenemos la posibilidad de crear diseños más adaptables y accesibles que se ajusten automáticamente al tamaño de la pantalla y al tamaño de la fuente preferido del usuario. Por ejemplo, en lugar de establecer un tamaño de fuente fijo de 16px, se puede utilizar la siguiente declaración CSS para establecer un tamaño de fuente que varía entre 14px y 18px, según el tamaño de la pantalla del usuario:

font-size: clamp(14px, 2vw, 18px);

En este caso, la unidad de medida vw se refiere al ancho de la ventana gráfica del usuario y se utiliza junto con la unidad clamp() para establecer un rango de valores para el tamaño de la fuente. El resultado es una tipografía fluida que se adapta automáticamente al tamaño de la pantalla y al tamaño de la fuente preferido del usuario.

Comparte este artículo

¿Que tal te pareció este artículo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
Responsable: Sebastián Echeverri (portafolio@sebasweb.net)
Fin del tratamiento: Moderación de comentarios para evitar spam
Legitimación: Tu consentimiento
Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
Derechos: Acceso, rectificación, portabilidad, olvido

Recomiendo:

Sobre la afiliación…

Para mantener este blog, cuento parcialmente con el respaldo de enlaces de afiliación, los cuales generan una pequeña comisión si decides adquirir algo a través de ellos. Esto no implica ningún gasto adicional para ti y solo enlazo productos que personalmente he utilizado y recomiendo.

También te podría interesar ver estos artículos

WordCamp Madrid 2023

A continuación un pequeño resumen en imágenes de lo que fue la WordCamp Madrid 2023.

Webinar Emprende: Diseña tu web con WordPress – Las Rozas Next

En este artículo encontrarás el resumen en texto y videos de lo que fue el webinar «Diseña tu...

Redirecciones masivas en Rank Math

Si llegaste a este artículo es porque seguramente estas buscando la forma de hacer redirecciones masivas en Rank...

Evitar que WordPress pida los datos FTP al instalar o actualizar un plugin o tema

Cuando trabajamos en el diseño y desarrollo web utilizando un servidor web local o un entorno LAMP, es...

Modular DS: Administrar varios sitios web en WordPress a la vez

Un sitio web para Administrar varios WordPress con Modular DS Administrar varios WordPress a la vez puede resultar...

Redireccionar un nombre de dominio a otro dominio con htaccess

El archivo .htaccess es una herramienta muy útil en el mundo del desarrollo web. Se trata de un...

Algunas plataformas con las que trabajo

No te vayas sin tu regalo!

Apúntate a la newsletter y recibirás GRATIS un pack exclusivo de plantillas para Elementor PRO

Apúntate GRATIS a la newsletter y llévate de regalo un pack de plantillas exclusivas para Elementor!

SUSCRÍBETE

No te pierdas los artículos y trucos relacionados con WordPress, Elementor y diseño y desarrollo web en general.