Tekst die schaalt zonder media queries
Een kop van 16 px op een telefoon en 32 px op een desktop had vroeger twee of drie breakpoints nodig. Met clamp() volstaat één regel: de grootte groeit soepel mee met het scherm tussen een ondergrens en een bovengrens. Het lastige is de middelste waarde, een mix van een vaste grootte en een percentage van de schermbreedte. Deze generator rekent die uit op basis van de twee groottes waar het jou om gaat.
Een clamp()-waarde in vier stappen
- Voer de kleinste en grootste grootte in, bijvoorbeeld 16 en 32.
- Voer de schermbreedtes in waarbij elk geldt, bijvoorbeeld 320 en 1280 pixels.
- Kies px of rem en, als je site de root-lettergrootte wijzigt, de pixels in 1rem. Kies de CSS-eigenschap voor een kant-en-klare declaratie.
- Kopieer de waarde of de declaratie. De tabel en de schuifregelaar tonen de grootte bij elke breedte daartussen.
Wat de drie delen van clamp() doen
Het resultaat ziet eruit als clamp(1rem, 0.6667rem + 1.6667vw, 2rem). De eerste waarde is de kleinste grootte die de eigenschap kan krijgen, de laatste is de grootste en de middelste is de lijn ertussen. De tool berekent de helling uit het groottesverschil gedeeld door het breedteverschil, en het vaste deel uit het punt waar die lijn een schermbreedte van nul kruist. Moet de grootte op grotere schermen kleiner worden, dan zet de tool de kleinere waarde eerst, omdat clamp() altijd eerst het minimum verwacht.
Rem houdt zoomen werkend
Groottes in rem volgen de lettergrootte die een bezoeker in de browser heeft ingesteld, px-waarden niet. Een zuivere vw-grootte negeert de zoominstelling volledig, wat toegankelijkheidscontroles kan laten falen. Een rem-deel combineren met het vw-deel, zoals deze tool voor rem-groottes doet, houdt tekst zoombaar. Test je ontwerp bij 200 % zoom en houd de grootste grootte hooguit zo'n tweeënhalf keer de kleinste.
Niets verlaat je browser
De waarden worden op de pagina berekend. De generator doet geen netwerkverzoek en slaat niets op.