Vloeistofafstandklem()generator
Bereken een echte vloeiende CSS-clamp()-waarde op basis van een minimale en maximale grootte over twee viewport-breedten, waarbij de helling en het snijpunt stap voor stap worden weergegeven en een live voorbeeld van het formaat wijzigen.
Resultaat
CSS klem() werkt op precies dezelfde manier voor spatiëring als voor lettergrootte: de eigenschap is nu eenmaal marge, opvulling of tussenruimte in plaats van lettergrootte. Deze pagina opent de rekenmachine met een bereik van 8px tot 32px over een viewport van 320px tot 1280px, een gebruikelijke stap voor sectieopvulling of kaartopeningen die krap moeten aanvoelen op een telefoon en ruim op een desktop zonder dat er een mediaquery in zicht is.
De onderliggende wiskunde maakt het niet uit wat de cijfers voorstellen: dezelfde formule voor helling en y-as-intersectie die een vloeiende koersgrootte produceert, produceert een vloeiende afstandswaarde, dus de onderstaande uitsplitsing laat precies zien hoe 8px en 32px veranderen in een kopieerklare klem()-regel voor opvulling: klem(...).
Versleep de schuifregelaar voor de breedte van het venster om een voorbeeld te zien van hoe de afstand zou aanvoelen op elke breedte tussen de twee breekpunten, pas de min- en max-waarden aan voor een strakker of losser bereik, en kopieer de voltooide lijn rechtstreeks naar de afstandseigenschap die deze nodig heeft.