La función min() en CSS se usa para extraer el valor mínimo de un conjunto de valores separados por comas. Puede tomar dos parámetros y se puede usar una función min dentro de otra función min si la comparación se va a realizar entre varios valores.
Sintaxis:
min(value1, value2); min(value1, min(value2, min(value3, value4)));
Parámetros: Toma los siguientes parámetros.
- valores: Es el conjunto de valores separados por comas de donde se extrae el más pequeño.
Devoluciones: esta función devuelve el valor más pequeño de un conjunto de valores separados por comas.
A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* CSS for the html */
*{
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
font-stretch: narrower;
font-weight: 600;
}
.box{
display: flex;
color: white;
background-color: green;
justify-content: center;
height: min(200px, 500px);
width: min(200px, 500px);
}
h2{
align-self: center;
}
</style>
<body>
When nested min function is not used
<div class="box">
<h2>Geeks for geeks</h2>
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* CSS for the html */
*{
font-family: 'Times New Roman', Times, serif;
font-size: min(20px, 1000px);
font-stretch: narrower;
font-weight: 600;
}
.box{
display: flex;
color: white;
background-color: green;
justify-content: center;
height: min(20vh, min(30vh, min(40vh, 50vh)));
width: min(50vw, min(50vw, min(40vw, 50vw)));
}
h2{
align-self: center;
}
</style>
<body>
When nested min function is
used with different units
<div class="box">
<h2>Geeks for geeks</h2>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Ópera
- Safari
- Firefox
- Borde