⇪

min() max() y clamp()

facebook-svg gplus-svg twitter-svg

Las funciónes min() y max()

En CSS la función min() escoge el valor mínimo de una lista de valores. La función max() escoge el valor máximo.
En el siguiente ejemplo el div tendrá una anchura de 50% pero nunca será más ancho de 700px.

  
div{ width: min(50%, 700px);}

Esto equivale a:

div{
  width:50%;
  min-width:700px;
  }

Estas funciones pueden tomar más de dos valores. Por ejemplo si queremos que un elemento sea cuadrado i siempre visible en el viewport podemos escribir:


div {
    width: min(50vw, 50vh, 700px);
    height: min(50vw, 50vh, 700px);
  }

donde el div tiene el mismo valor para la anchura y la altura y es el valor mínimo del conjunto de valores 50vw, 50vh, 700px.

Las funciones min() y max() pueden ser utilizadas dentro de calc().  Si queremos que un elemento div guarde una cierta relación de aspecto por ejemplo 2/1, podemos escribir:


div {
    width: min(50vw, 50vh, 700px);
    height: calc( min(50vw, 50vh, 700px) / 2);
  }

Aunque podemos utilizar calc() dentro de las funciones min() y max(), no lo necesitamos, ya que si fuera necesario podemos utilizar operaciones matemáticas para calcular los valores utilizados:

Por ejemplo: quiero que un div sea tan alto como la ventana 100vh pero no menos alto de 200px. Este div tiene un margin-top y margin-bottom de 1 em. Para que no se salga de la ventana necesito hacer que su altura sea 100vh - 2em. Lo puedo hacer utilizando operaciones matemáticas de la misma manera como lo haría dentro de calc().

div {
    margin:1em auto;
    width: 50vw;
    height: max(100vh - 2em, 200px);
    border: solid;
  }

Las funciones min() y max() pueden ser anidadas, por ejemplo una función min() puede calcular uno de los valores utilizados dentro de una función max().

width: max( 700px, min(50vw, 50vh) );

La función clamp()

La función clamp ( en español clamp significa abrazadera ) toma una lista de 3 parametros: un mínimo, un valor deseado y un máximo: clamp(mínimo, valor_deseado, máximo); El valor deseado será utilizado en el css si no es más pequeño que el valor mínimo o más grande que el valor máximo:

font-size: clamp(1rem, 2.5vw, 2rem);

Los parámetros pueden ser valores o funciones matemáticas. Es importante que el valor resultante sea un argumento válido  (unidades de longitud, ángulos, unidades de tiempo etc... según el caso).