Buen video de Kevin Powell. Aquí hay algunas notas, pensamientos y cosas que aprendí mientras lo veía. Justo cuando salieron, estaba mayormente obsesionado con font-size uso, pero son solo funciones, por lo que se pueden usar en cualquier lugar donde use un número, como una longitud.
A veces, el uso bastante básico permite un código más estricto, pero el cambio para llegar allí se siente un poco alucinante. Como establecer un “máximo” aquí, realmente usa min().
.el {
width: 75%;
max-width: 600px;
/* tighter, but the change from max to min feels weird */
width: min(75%, 600px);
}El min() y max() Las funciones pueden tomar más de dos valores, lo cual es genial, ¡pero es difícil aclarar lo que está sucediendo! Sería bueno si DevTools pudiera decirle cuál eligió en un momento dado.
.el {
width: min(100px, 25%, 50vh, 30ch);
}No necesitas un calc() hacer matemáticas por dentro!
.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 video incrustado:
Enlace directo →