Wat is CSS clamp() calculator?
CSS clamp stelt een minimumwaarde, een vloeiende voorkeurswaarde en een maximumwaarde in één expressie in. Het wordt vaak gebruikt voor responsieve lettergroottes en afstanden omdat het soepel kan schalen tussen mobiel en desktop zonder meerdere media queries te schrijven.
Snel antwoord
Bereken een responsieve CSS clamp-expressie voor vloeiende typografie, afstanden of layout-waarden. Voer minimum- en maximumgroottes in met viewport-bereiken om een waarde te genereren die soepel tussen beide schaalt.
Last updated: 2026-06-11
Beperkingen
- Clamp()-waarden zijn statisch zodra ze zijn gegenereerd. Ze passen zich niet aan aan veranderingen in de DOM, gebruikersinteracties of containerafmetingen. Overweeg voor layout-bewust schalen container query-eenheden.
- De viewport-gebaseerde voorkeurswaarde kan aanpassing nodig hebben bij extreme schermformaten. Test de gegenereerde clamp-waarde op zeer kleine en zeer grote viewports om te bevestigen dat de curve natuurlijk aanvoelt.
- Deze tool gebruikt viewportbreedte (vw) voor de voorkeurswaarde. Het houdt geen rekening met container query-eenheden (cqw) of andere nieuwere CSS-eenheden die zich anders gedragen.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Voer de kleinste en grootste grootte in die u wilt dat de eigenschap gebruikt.
- Voer de viewportbreedte in waar de kleinste waarde moet beginnen en de viewportbreedte waar de grootste waarde moet stoppen.
- Kies de CSS-eigenschap die u wilt genereren.
- Kopieer de clamp-expressie naar uw stylesheet en test deze op mobiele, tablet- en desktopbreedtes.
Waarvoor je het kunt gebruiken
- Maak vloeiende koppen zonder veel media queries.
- Schaal afstanden soepel tussen mobiel en desktop.
- Kopieer een clamp-waarde direct naar CSS.