CSS clamp-generator
Voer breedten en grootten in voor smalle en brede schermen om CSS te genereren die tekstgrootte of tussenruimte vloeiend wijzigt. Bekijk een voorbeeld van uitvoer in px of rem, kopieer daarna de CSS en Tailwind-code of sla die op als tekst.
Wat je kunt doen
Twee paren van breedte en grootte opgeven
Geef grootten op voor een smalle en een brede viewport. Ondersteunt 6 typen: lettergrootte, tussenruimte, padding, margin, breedte en hoogte.
Code genereren in px of rem
Voer alle waarden in px in en kies px of rem als uitvoereenheid. Haal een CSS-declaratie en Tailwind-code voor een willekeurige eigenschap op.
De gegenereerde CSS direct controleren
Past de CSS toe op twee elementen in het voorbeeld. Controleer hoe tekst en tussenruimte worden weergegeven bij de huidige framebreedte.
Gebruiksaanwijzing
De eigenschap kiezen die je wilt wijzigen
Kies de CSS-eigenschap die je wilt instellen, zoals font-size voor tekstgrootte of gap voor de ruimte tussen elementen.
Twee viewportbreedten en grootten invoeren
Voer de twee viewportbreedten en de bijbehorende grootte in px in. De grootte voor de smalle viewport mag niet groter zijn dan die voor de brede viewport.
Uitvoereenheid controleren en genereren
Kies px of rem in de geavanceerde instellingen. Controleer bij rem ook de basislettergrootte voordat je op CSS genereren klikt.
Voorbeeld bekijken en code ophalen
Kopieer de CSS en plak die op de plek waar je die gebruikt. Open de Tailwind-code om die op te halen. Je kunt ook beide items samen kopiëren of als tekst opslaan.
Handig wanneer je
Kopgroottes vloeiend wijzigen
tekstgroottes wilt instellen voor smalle en brede viewports en die vloeiend tussen deze breedten wilt laten variëren in plaats van in stappen.
Tussenruimte aan de viewport aanpassen
kaarttussenruimten of binnenmarges wilt laten variëren binnen de ingestelde minimum- en maximumgrootten.
Vloeiende grootten opgeven en het voorbeeld lezen
De 3 waarden in clamp
clamp is een CSS-functie waarmee je een minimumwaarde, een vloeiende waarde en een maximumwaarde opgeeft. De gegenereerde formule verbindt twee referentiepunten met een lineaire expressie en begrenst grootten buiten het bereik tot de eindpuntwaarden.
Invoer in px; uitvoer in px of rem
Zowel viewportbreedten als grootten worden in px ingevoerd. Bij rem-uitvoer worden de grootten en de vaste term gedeeld door de basislettergrootte; de vw-coëfficiënt voor viewportbreedte blijft ongewijzigd.
Stem de rem-basis af op de gebruiksplek van de code
Standaard behandelt de code 1rem als 16px. Als de lettergrootte van het root-element afwijkt op de plek waar je de code gebruikt, verschillen ook de eindpuntgroottes en de manier waarop de grootte verandert. Controleer dit ook op de gebruiksplek.
Het voorbeeldframe bepaalt de viewportbreedte
Het voorbeeld is een onafhankelijk weergaveframe. De vw-waarde wordt berekend op basis van de breedte binnen het frame, niet de breedte van het volledige scherm. Afhankelijk van de eigenschap wordt dezelfde gegenereerde CSS toegepast op tekst, de tussenruimte tussen de twee elementen, marges of elementafmetingen.
Controleer ook waar de code wordt gebruikt
De voorbeeldtekst en -structuur liggen vast. Controleer ook lettertypen, lange tekst, regelafbreking en tekstvergroting in de browser op de plek waar je de code gebruikt. De Tailwind-code gebruikt de notatie voor willekeurige eigenschappen; controleer ook of die op de gebruiksplek wordt herkend en gegenereerd.
Veelgestelde vragen
Wat gebeurt er buiten het opgegeven bereik van viewportbreedtes?
Bij breedtes onder de kleinste opgegeven breedte wordt de minimumgrootte gebruikt; bij breedtes boven de grootste opgegeven breedte de maximumgrootte. Voor rem moet je dezelfde basislettergrootte gebruiken als toen de code werd gegenereerd.
Wat is de basislettergrootte voor rem?
Dit bepaalt hoeveel px voor 1rem worden gebruikt bij de berekening. De standaardwaarde is 16px; in de geavanceerde instellingen kun je deze wijzigen naar 1–1000px. Stem dit af op de lettergrootte van het root-element waarin je de code gebruikt.
Kan ik gelijke grootten of negatieve waarden opgeven?
Stel minimum en maximum in op dezelfde waarde voor een vaste grootte. Negatieve waarden zijn alleen toegestaan voor margin. Grootten die afnemen naarmate de viewport breder wordt, worden niet ondersteund.
Worden wijzigingen aan eigenschappen of waarden meteen toegepast?
Als je deze waarden wijzigt, worden de gegenereerde code en het voorbeeld gewist. Klik op CSS genereren om ze bij te werken. Dit geldt ook wanneer je de uitvoereenheid of basislettergrootte wijzigt.
Kan ik de voorbeeldtekst wijzigen?
De voorbeeldtekst en Aa 123 liggen beide vast. Je kunt de tekst niet bewerken. Controleer ook de daadwerkelijke tekst en weergavebreedte op de pagina waar je de gegenereerde CSS gebruikt.
Invoer en resultaten
- Viewportbreedte
- 1–100000px. De smalle viewportbreedte moet kleiner zijn dan de brede. Decimalen zijn ook toegestaan.
- Grootte
- 0–10000px. Alleen margin mag tot −10000px gaan. De grootte voor de smalle viewport mag niet groter zijn dan die voor de brede viewport.
- Uitvoer
- Een CSS-declaratie en een Tailwind-eigenschap met willekeurige waarde. Sla beide items op in css-clamp-generator.txt.
- Precisie
- De gegenereerde formule gebruikt coëfficiënten met maximaal 13 significante cijfers. Er treedt bijvoorbeeld een fout op bij breedtes die zo dicht bij elkaar liggen dat de afgeronde formule de referentiepunten niet meer kan reproduceren.