min(), max() y Clamp() son magia CSS.

 

 

 

Buen vídeo de Kevin Powell. Aquí hay algunas notas, pensamientos y cosas que aprendí mientras lo veía. Justo cuando salió, estaba obsesionado con font-sizeel uso, pero son solo funciones, por lo que se pueden usar en cualquier lugar donde se use un número, como una longitud.

A veces, un uso bastante básico permite un código más estricto, pero el cambio para llegar allí parece un poco alucinante. Por ejemplo, cómo establecer un “máximo” aquí, realmente usamos min().

.el { width: 75%; max-width: 600px; /* tighter, but the change from max to min feels weird */ width: min(75%, 600px);}

Las funciones min()y max()pueden tomar más de dos valores, lo cual es genial, ¡pero es difícil entender lo que está pasando! Sería bueno si DevTools pudiera decirle cuál elegido en un momento dado.

 

.el { width: min(100px, 25%, 50vh, 30ch);}

¡No necesitas un calc()para hacer matemáticas adentro!

.el { width: min(10vw + 10%, 100px);}

Es razonable que desee establecer un valor mínimo y máximo. Puede anidar las funciones para hacer esto, pero es menos complicado hacerlo con clamp().

.el { /* Note we're always using a relative unit somewhere so that zooming stays effective. */ font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);}

Aquí está el vídeo incrustado:

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

min(), max() y Clamp() son magia CSS.

min(), max() y Clamp() son magia CSS.

Buen vídeo de Kevin Powell. Aquí hay algunas notas, pensamientos y cosas que aprendí mientras lo veía. Justo cuando salió, estaba obsesionado con font-siz

programar

es

https://aprendeprogramando.es/static/images/programar-min-1480-0.jpg

2024-06-13

 

min(), max() y Clamp() son magia CSS.
min(), max() y Clamp() son magia CSS.

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences