7.1 Función min()
La función min() devuelve el valor más bajo de una lista de argumentos. Es útil para establecer valores
que no superen un límite definido.
Sintaxis:
selector {
propiedad: min(value1, value2 ...);
}
Ejemplo de uso:
En este ejemplo, el ancho del bloque no será mayor a 300 píxeles, pero si el 100% del elemento padre es menor a 300 píxeles, se usará el valor del 100%:
/* El ancho del bloque no será mayor de 300px, pero no menor de 100px */
.block {
width: min(300px, 100%);
}
Ejemplo 2: Restringir el tamaño de fuente
En este ejemplo, el tamaño de la fuente no será mayor de 2em, pero si el 5% del ancho de la ventana es menor, se usará ese valor:
.text {
font-size: min(2em, 5vw);
}
7.2 Función max()
La función max() devuelve el valor más alto de una lista de argumentos. Es útil para establecer valores
que no bajen de un límite definido.
Sintaxis:
selector {
propiedad: max(value1, value2, ...);
}
Ejemplo de uso
En este ejemplo, el ancho del bloque no será menor de 200 píxeles, pero si el 50% del elemento padre es mayor a 200 píxeles, se usará el valor del 50%:
/* El ancho del bloque no será menor de 200px, pero puede ser mayor */
.block {
width: max(200px, 50%);
}
Ejemplo 2: Tamaño mínimo de fuente
En este ejemplo, el tamaño de la fuente no será menor de 1.5em, pero si el 2% del ancho de la ventana es mayor,
se usará ese valor:
.title {
font-size: max(1.5em, 2vw);
}
7.3 Función clamp()
La función clamp() devuelve un valor que está limitado por valores mínimos y máximos. Recibe tres argumentos:
el valor mínimo, el valor preferido y el valor máximo.
Sintaxis:
selector {
propiedad: clamp(min, expresión, max);
}
Ejemplo de uso
En este ejemplo, el tamaño de la fuente cambiará dependiendo del ancho de la ventana: mínimo 12 píxeles, máximo 24 píxeles y el valor preferido es el 2% del ancho de la ventana:
/* Fuente de tamaño entre 12px y 24px, dependiendo del ancho de la pantalla */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Ejemplo 2: Restringir el ancho de un bloque
En este ejemplo, el ancho del bloque cambiará dependiendo del ancho del elemento padre, pero no será menor de 200 píxeles ni mayor de 600 píxeles:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Ejemplo de implementación completa
.container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.box {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
width: clamp(200px, 50%, 600px);
}
.text {
font-size: clamp(1em, 2vw, 2em);
}
.sidebar {
background-color: #2ecc71;
color: white;
padding: 10px;
text-align: center;
width: max(200px, 30%);
}
.text-small {
font-size: min(2em, 5vw);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de las funciones min(), max() y clamp()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Ancho: clamp(200px, 50%, 600px)</div>
<p class="text">Tamaño de fuente: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Ancho: max(200px, 30%)</div>
<p class="text-small">Tamaño de fuente: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION