CSS clamp-generator
Ange skärmbredder och storlekar för liten och stor skärm för att generera CSS som ändrar textstorlek eller avstånd mjukt. Förhandsgranska utdata i px eller rem och kopiera sedan CSS- och Tailwind-koden eller spara den som text.
Det här kan du göra
Ange 2 par med bredd och storlek
Ange storlekar för en liten vy och en stor vy. Stöder 6 typer: fontstorlek, luckor, utfyllnad, marginal, bredd och höjd.
Generera kod i px eller rem
Ange alla värden i px och välj px eller rem för utdata. Få en CSS-deklaration och Tailwindkod med godtycklig egenskap.
Kontrollera den genererade CSS-koden direkt
CSS-koden tillämpas på två element i förhandsvisningen. Kontrollera hur text och avstånd ser ut vid den aktuella ramens bredd.
Så använder du
Välj egenskapen som ska ändras
Välj den CSS-egenskap du vill ange, till exempel font-size för textstorlek eller gap för avstånd mellan element.
Ange två vyportsbredder och storlekar
Ange de båda vyportsbredderna och deras storlekar i px. Storleken för den mindre vyn får inte vara större än storleken för den större vyn.
Kontrollera utdataenheten och generera
Välj px eller rem i avancerade inställningar. För rem ska du också kontrollera basfontstorleken innan du trycker på Generera CSS.
Förhandsgranska och hämta koden
Kopiera CSS-koden och klistra in den där du ska använda den. Öppna Tailwind-koden för att hämta den. Du kan också kopiera båda delarna tillsammans eller spara dem som text.
Användbart när
Ändra rubrikstorlekar jämnt
När du vill ange textstorlekar för smala och breda vyper och låta dem ändras kontinuerligt mellan dessa bredder i stället för i steg.
Anpassa avstånd till vyn
När du vill att kortens mellanrum eller inre utfyllnad ska variera inom de minsta och största storlekar du har angett.
Ange flytande storlekar och läs förhandsvisningen
De 3 värdena i clamp
clamp är en CSS-funktion som anger ett minsta värde, ett flytande värde och ett största värde. Den genererade formeln sammanbinder två referenspunkter med ett linjärt uttryck och begränsar storlekar utanför intervallet till ändpunktsvärdena.
Inmatning i px; utdata i px eller rem
Både vyportsbredder och storlekar anges i px. För rem-utdata divideras storlekarna och konstanttermen med basfontstorleken, medan vw-koefficienten för vyportsbredden används oförändrad.
Anpassa rem-basen till där koden används
Som standard behandlar koden 1rem som 16px. Om rotelementets fontstorlek skiljer sig där koden används blir även ändpunktsvärdena och storleksändringen annorlunda. Kontrollera det på användningsstället.
Förhandsvisningsramen anger vyportsbredden
Förhandsvisningen är en separat visningsram. Den beräknar vw från bredden inuti ramen, inte från hela skärmens bredd. Beroende på egenskap tillämpas samma genererade CSS på text, mellanrummet mellan de två elementen, utfyllnad eller elementens mått.
Kontrollera även användningsstället
Texten och strukturen i förhandsvisningen är låsta. Kontrollera även typsnitt, lång text, radbrytning och webbläsarens textförstoring där du använder koden. Tailwind-koden använder formatet för godtyckliga egenskaper; kontrollera också att det upptäcks och genereras där du använder den.
Vanliga frågor
Vad händer utanför det angivna intervallet för vyportsbredd?
Bredder som är mindre än den lägsta angivna bredden använder minsta storleken, och bredder som är större än den högsta angivna bredden använder största storleken. För rem måste du använda samma basfontstorlek som när koden genererades.
Vilken basfontstorlek gäller för rem?
Det anger hur många px som används för att beräkna 1rem. Standardvärdet är 16px och du kan ändra det till 1–1000px i avancerade inställningar. Anpassa till fontstorleken för rotelementet där koden ska användas.
Kan jag ange lika stora värden eller negativa värden?
Sätt minsta och största värde till samma värde för en konstant storlek. Negativa värden tillåts endast för marginal. Storlekar som minskar när vyn blir bredare stöds inte.
Träd ändringar av egenskaper eller värden in omedelbart?
Om du ändrar dem raderas den genererade koden och förhandsvisningen. Tryck på Generera CSS för att uppdatera dem. Detsamma gäller när du ändrar utdataenheten eller basfontstorleken.
Kan jag ändra texten i förhandsvisningen?
Exempeltexten och Aa 123 är båda låsta. Det finns ingen funktion för att redigera text. Kontrollera även den faktiska texten och visningsbredden på sidan som använder den genererade CSS-koden.
Inmatning och resultat
- Vyportsbredd
- 1–100000px. Den mindre vyportsbredden måste vara mindre än den större. Decimaler accepteras också.
- Storlek
- 0–10000px. Endast marginal kan gå ner till −10000px. Storleken för den mindre vyn får inte vara större än storleken för den större vyn.
- Utdata
- En CSS-deklaration och en Tailwind-egenskap med godtyckligt värde. Spara båda delarna som css-clamp-generator.txt.
- Precision
- Den genererade formeln använder koefficienter med upp till 13 gällande siffror. Ett fel uppstår för bredder som ligger så nära varandra att den avrundade formeln inte kan återskapa referenspunkterna, till exempel.