Calculadora de CSS clamp()
Introduïu una mida per a pantalles petites i grans i obtingueu un valor clamp() fluid que s'escala de manera suau entremig, ideal per a mides de font, farcits, marges o espais.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)El resultat manté una part en rem en el terme mitjà, de manera que el text encara s'amplia quan algú fa zoom al 200%, cosa que no passaria amb un valor basat només en el viewport.
Text fluid, amb la mida ideal.
El càlcul s'executa completament al seu navegador. Cap dada que introdueixi aquí es puja a BroBroGo.
PMF
Com construeix la calculadora el valor clamp()?
S'indiquen dos punts: una mida per a una amplada de pantalla petita i una altra per a una pantalla gran. La calculadora traça una línia recta entre ambdues perquè la mida creixi de manera fluida a mesura que s'amplia la pantalla, i després l'envolta en un clamp() perquè mai no baixi de la mida de pantalla petita ni superi la de pantalla gran. Entre les dues amplades, la mida s'escala de manera fluida; a l'exterior, es manté en el límit corresponent.
Per què el resultat s'expressa en rem i vw en lloc de píxels?
Els límits estan en rem i la part central variable manté un component en rem, de manera que el text continua creixent quan un lector fa zoom o augmenta la mida de font predeterminada del seu navegador (un valor basat només en píxels o en el viewport podria impedir-ho). Escriviu les mides en píxels perquè és com sol pensar la majoria de la gent, i l'eina les converteix a rem utilitzant la mida de font de l'arrel.
Puc utilitzar-ho per a l'espaiat i no només per a la mida de la font?
Sí. El mateix valor funciona per a padding, margin, gap, amplada o alçada; a qualsevol lloc on s'utilitzi una longitud. Canvieu la vista prèvia a Caixa per veure com creix l'espaiat en lloc del text. Si les mides petita i gran són iguals, el resultat es redueix a una longitud fixa simple, ja que no hi ha res a escalar.
Tots els navegadors admeten clamp()?
Sí, tots els navegadors actuals admeten clamp() des del 2020, de manera que podeu utilitzar el valor directament sense cap alternativa. Amb un màxim molt gran o una taxa de canvi ràpida, val la pena fer una comprovació ràpida amb un zoom del 200% per assegurar-se que el text encara s'amplia per als lectors que ho necessitin.