Skapa ett responsivt CSS-värde med clamp()

Frontendutvecklare använder verktyget när text, mellanrum eller komponenter ska ändra storlek mjukt med skärmbredden och ett responsivt CSS-värde med clamp() behövs.

Skapa ett responsivt CSS-värde med clamp() mellan två storlekar. Allt körs i webbläsaren utan att inmatade uppgifter laddas upp eller sparas.

Så använder du

Ange den minsta storleken i pixlar som du vill ha på små skärmar.
Ange den maximala storleken i pixlar för större skärmar.
Fyll i minsta och största visningsbredd i pixlar.
Kör generatorn för att få en CSS clamp-deklaration redo att integrera.

Exempel

Ett vanligt exempel definierar en textstorlek som skalar mellan en liten skärm och en stor skärm. Efter genereringen kopierar du clamp-värdet och testar det i din stilmall för att kontrollera att texten följer visningsbredden som förväntat.

Indata

Resultat

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

Gränser och format

Verktyget genererar endast värdet för flytande storlek, inte hela layouten eller andra stilar.
Funktionen clamp måste stödjas av webbläsaren som dina besökare använder.
Dåligt valda visningsbreddsvärden kan göra skalningen för snabb eller för långsam.
Testa alltid resultatet vid flera skärmbredder innan du driftsätter det.

Var bearbetningen sker

Beräkningen av det flytande värdet körs i din webbläsare. Måtten du anger stannar på din enhet och skickas inte till en extern tjänst. Du kan förbereda din CSS utan att överföra data.

Vanliga frågor

Vad betyder de fyra värdena?

Du anger minsta och största storlek i pixlar, sedan minsta och största visningsbredd. Verktyget använder dessa punkter för att bygga en progression mellan de två storlekarna.

Kan jag använda resultatet för marginaler eller avstånd?

Ja, det genererade värdet kan användas för textstorlek, marginal eller avstånd, så länge CSS-egenskapen accepterar en clamp-funktion. Anpassa bara enheten och egenskapen i stilmallen.

Fungerar resultatet i alla webbläsare?

Funktionen clamp stöds brett av moderna webbläsare, men äldre versioner kanske inte känner igen den. Ange ett reservvärde om du behöver stödja mycket gamla webbläsare.

Skapar verktyget hela layouten eller bara ett storleksvärde?

Verktyget genererar bara ett fluidt storleksvärde, alltså en CSS clamp-deklaration. Det bygger inte hela layouten och lägger inte till andra stilar. Du anger minsta och största storlek samt minsta och största viewportbredd, och får en färdig deklaration att integrera. Anpassa sedan enheten och egenskapen i din stilmall efter behov.

Varför bör jag testa resultatet vid flera skärmbredder?

Därför att dåligt valda viewportvärden kan göra skalningen för snabb eller för långsam. Genom att testa vid flera bredder ser du om storleken följer en rimlig kurva mellan minsta och största punkt. Justera värdena och testa igen innan du publicerar. Beräkningen sker i webbläsaren och måtten du anger stannar på din enhet.