CSS clamp()-generator
Generera ett flytande CSS clamp()-värde som skaleras smidigt mellan två visningsportbredder.
CSS clamp()-generator
Flytande typografi och avstånd skaleras värde smidigt när visningsområdet ändras, istället för att hoppa mellan fasta storlekar vid ett fåtal mediefråga-brytpunkter. Det här verktyget skapar det värdet åt dig: ange en lägsta och högsta storlek tillsammans med de visningsportbredder de gäller vid, och det returnerar en CSS clamp()-funktion med linjär interpolering däremellan, redo att klistra in i ett formatblad.
Minimum- och maximumstorlek ställer in de två ändpunkterna för skalan; minsta och största visningsportbredd bestämmer var varje ände träder i kraft — under den minsta bredden förblir värdet på sitt minimum, ovanför det maximala på sitt maximum, och däremellan växer det linjärt med visningsområdet. Enheten byter utmatningen mellan px och rem, där root-teckenstorleken styr px-till-rem-konverteringen, och decimaler styr hur mycket precision de genererade talen har. Utdataformatet omsluter samma clamp() som en enkel deklaration, en CSS-anpassad egenskap, eller en Tailwind godtycklig värdeklass, så du kan klistra in den direkt i din kod.
När du slår på tillgänglighetskontollen läggs en anteckning till när inställningen kan orsaka problem: pixelbaserad storlek ignorerar en läsares inställning för webbläsarens teckenstorlek, och ett minimum som är för litet förblir svårt att läsa även innan det börjar skaleras. Båda är vanliga misstag i handskrivna formler för flytande typografi, och verktyget flaggar dem istället för att skicka dem tyst.
Allt beräknas i din webbläsare när du justerar alternativen — allt du anger skickas ingenstans. När resultatet ser rätt ut kopierar du det, laddar ned det som en .txt-fil, eller skickar det till inmatningen i ett annat verktyg för att fortsätta arbeta med det.