Maak een responsieve CSS-clamp

Front-endontwikkelaars gebruiken dit wanneer tekst, afstand of een onderdeel vloeiend tussen twee grenzen moet meegroeien met de schermbreedte.

U kunt een responsieve clamp tussen twee groottes genereren. Alles werkt in uw browser, zonder invoer te uploaden of op te slaan.

Hoe te gebruiken

Voer de minimale grootte in pixels in die u op kleine schermen wilt.
Geef de maximale grootte in pixels voor grotere schermen op.
Vul de minimale viewportbreedte en de maximale viewportbreedte in pixels in.
Voer de generator uit om een gebruiksklare CSS-clamp-declaratie te krijgen.

Voorbeeld

Een veelvoorkomend voorbeeld definieert een tekstgrootte die schaalt tussen een klein scherm en een groot scherm. Kopieer na de generatie de clamp-waarde en test deze in uw stylesheet om te controleren of de tekst de viewportbreedte volgt zoals verwacht.

Invoer

Resultaat

clamp(16px, 13.090909px + 0.909091vw, 24px)

Limieten en formaten

Het hulpmiddel genereert alleen de waarde voor de fluïde grootte, niet de volledige lay-out of andere stijlen.
De clamp-functie moet worden ondersteund door de browser die uw bezoekers gebruiken.
Slecht gekozen viewportwaarden kunnen de schaling te snel of te langzaam maken.
Test het resultaat altijd op verschillende schermbreedtes voordat u het implementeert.

Waar de verwerking gebeurt

De berekening van de fluïde waarde gebeurt in uw browser. De afmetingen die u invoert, blijven op uw apparaat en worden niet naar een externe dienst verzonden. U kunt uw CSS voorbereiden zonder gegevens te verzenden.

Veelgestelde vragen

Wat betekenen de vier waarden?

U geeft de minimale en maximale grootte in pixels op, en daarna de minimale en maximale viewportbreedte. Het hulpmiddel gebruikt deze punten om een progressie tussen de twee groottes op te bouwen.

Kan ik het resultaat gebruiken voor marges of afstand?

Ja, de gegenereerde waarde kan worden gebruikt voor een tekstgrootte, een marge of afstand, zolang de CSS-eigenschap een clamp-functie accepteert. Pas gewoon de eenheid en de eigenschap in uw stylesheet aan.

Werkt het resultaat in elke browser?

De clamp-functie wordt breed ondersteund door moderne browsers, maar oudere versies herkennen deze mogelijk niet. Geef een terugvalwaarde op als u zeer oude browsers moet ondersteunen.