Clamp() es una función de CSS que nos permite controlar de manera precisa el valor de una propiedad en diferentes tamaños de pantalla. En este artículo veremos como funciona con varios ejemplos y que diferencias tiene con las medias queries.

Qué es y como funciona Clamp en CSS

Clamp es una función de CSS que nos permite establecer límites para una propiedad específica**, eligiendo entre el valor mínimo, el valor preferido y el valor máximo** dependiendo si el valor está dentro o fuera del rango establecido. Su sintaxis es: clamp(min, preferred, max)

Un ejemplo de uso podría ser controlar el tamaño de los font-size de esta forma:

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

De igual forma, podemos utilizarlo con el ancho de una imagen:

img {
    width: clamp(50px, 75%, 300px);
}

De esta forma, obtenemos un cambio fluido de la propiedad. Por lo general, comenzará en un valor mínimo y se mantendrá este valor hasta un punto específico del ancho de la pantalla. A partir de ahí, empezará a incrementar hasta llegar al máximo. En esta gráfica se muestra como varía el valor de la propiedad:

¿Cuándo utilizar clamp y media queries?

Clamp y las media queries son herramientas complementarias en CSS, mientras que Clamp se utiliza para establecer límites progresivos en propiedades como anchos, tamaño de letra, márgenes y paddings:

.element {
  padding: clamp(10px, 15%, 25px);
}

Las medias queries se usan para adaptar el diseño según las características del dispositivo o tamaño de pantalla, como cambios en la estructura o disposición de elementos, al igual que en tamaños, márgenes y paddings, pero no de forma fluida, sino que se activa en un punto de interrupción: Un ejemplo de media queries para cambiar la disposición de los elementos:

@media screen and (max-width: 600px) {
    /* Estilos para pantallas pequeñas */
    .container {
        flex-direction: column;
    }
}