El método clamp() se utiliza para fijar el valor entre un límite superior e inferior. Toma tres parámetros que se enumeran a continuación:
- Valor mínimo
- Valor preferido
- Valor máximo
El valor mínimo es útil cuando el valor preferido es menor que el valor mínimo, de manera similar, el valor máximo es útil cuando el valor preferido es mayor que el valor máximo. El valor preferido se vuelve útil cuando está entre el valor mínimo y máximo.
La función clamp() se puede usar con varios elementos, como el tamaño de fuente, el ancho, etc. Construyamos un diseño simple para obtener una comprensión clara de la función clamp()
Sintaxis:
clamp(value1, value2, value3)
Parámetros:
- Aquí value1 representa el valor mínimo, value2 representa el valor preferido y value3 representa el valor máximo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
/* Setting clamp property of heading */
h1 {
font-size: clamp(2rem, 4vw, 4rem);
color: #eb4034;
}
/* Setting clamp property of box */
.box {
width: clamp(150px, 50%, 400px);
height: 8rem;
background: #5f76e8;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome To GFG</h1>
<div class="box"></div>
</div>
</body>
</html>
Producción:
En el ejemplo que se muestra arriba, vemos con qué facilidad se ajustan el ancho y el tamaño de fuente de acuerdo con la ventana gráfica con la ayuda de la función de abrazadera. La función clamp() es muy útil para la tipografía y para crear un diseño fluido.
Navegadores compatibles:
- Cromo
- Ópera
- Safari
- Firefox
- Borde
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA