CSS-clamp-Generator
Geben Sie Bildschirmbreiten und Größen für kleine und große Bildschirme ein, um CSS zu erzeugen, das Textgröße oder Abstände fließend ändert. Sehen Sie sich die Ausgabe in px oder rem in der Vorschau an und kopieren Sie CSS- und Tailwind-Code oder speichern Sie sie als Text.
Was du tun kannst
Aus 2 Paaren von Breite und Größe angeben
Gib Größen für einen kleinen Viewport und einen großen Viewport an. Unterstützt 6 Typen: Schriftgröße, Abstände, Padding, Margin, Breite und Höhe.
Code in px oder rem generieren
Gib alle Werte in px ein und wähle px oder rem für die Ausgabe. Du erhältst eine CSS-Deklaration und Code für eine beliebige Tailwind-Eigenschaft.
Das generierte CSS direkt prüfen
Wendet das CSS auf zwei Elemente in der Vorschau an. Prüfe, wie Text und Abstände bei der aktuellen Rahmenbreite erscheinen.
Verwendung
Die zu ändernde Eigenschaft wählen
Wähle die CSS-Eigenschaft, die du festlegen möchtest, etwa font-size für die Textgröße oder gap für den Abstand zwischen Elementen.
Zwei Viewport-Breiten und Größen eingeben
Gib beide Viewport-Breiten und die jeweilige Größe in px ein. Die Größe für den kleineren Viewport darf nicht größer als die für den größeren sein.
Ausgabeeinheit prüfen und generieren
Wähle px oder rem in den erweiterten Einstellungen. Bei rem prüfe auch die Basisschriftgröße, bevor du „CSS generieren“ drückst.
Vorschau ansehen und Code abrufen
Kopiere das CSS und füge es dort ein, wo du es verwenden willst. Öffne den Tailwind-Code, um ihn abzurufen. Du kannst auch alle 2 Elemente zusammen kopieren oder als Text speichern.
Nützlich, wenn
Überschriftengrößen sanft ändern
Wenn du Textgrößen für schmale und breite Viewports festlegen und sie zwischen diesen Breiten kontinuierlich statt in Stufen variieren möchtest.
Abstände an den Viewport anpassen
Wenn du möchtest, dass Kartenabstände oder inneres Padding innerhalb der von dir festgelegten Minimal- und Maximalgrößen variieren.
Flexible Größen angeben und die Vorschau lesen
Die 3 Werte in clamp
clamp ist eine CSS-Funktion, die einen Mindestwert, einen flexiblen Wert und einen Höchstwert festlegt. Die generierte Formel verbindet zwei Referenzpunkte mit einem linearen Ausdruck und begrenzt Größen außerhalb des Bereichs auf die Endpunktgrößen.
Eingabe in px; Ausgabe in px oder rem
Sowohl Viewport-Breiten als auch Größen werden in px eingegeben. Bei der rem-Ausgabe werden die Größen und der feste Term durch die Basisschriftgröße geteilt, während der vw-Koeffizient für die Viewport-Breite unverändert verwendet wird.
Die rem-Basis an den Einsatzort anpassen
Standardmäßig behandelt der Code 1rem als 16px. Wenn die Schriftgröße des Wurzelelements dort abweicht, wo der Code verwendet wird, ändern sich auch die Endpunktgrößen und die Art der Größenänderung. Prüfe es auch dort, wo du den Code verwendest.
Der Vorschaurahmen bestimmt die Viewport-Breite
Die Vorschau ist ein eigenständiger Anzeigerahmen. Sie berechnet vw aus der Breite innerhalb des Rahmens, nicht aus der Breite des gesamten Bildschirms. Je nach Eigenschaft wird dasselbe generierte CSS auf Text, den Abstand zwischen den beiden Elementen, den Zwischenraum oder Elementmaße angewendet.
Auch am Einsatzort prüfen
Text und Aufbau dieser Vorschau sind fest. Prüfe auch Schriftarten, langen Text, Zeilenumbruch und die Textvergrößerung des Browsers dort, wo du den Code verwendest. Der Tailwind-Code verwendet das Format für beliebige Eigenschaften; prüfe auch, dass er dort erkannt und generiert wird, wo du ihn verwendest.
Häufige Fragen
Was passiert außerhalb des angegebenen Viewport-Breitenbereichs?
Breiten, die schmaler als die kleinere angegebene Breite sind, verwenden die Mindestgröße, und Breiten, die breiter als die größere angegebene Breite sind, verwenden die Höchstgröße. Bei rem musst du dieselbe Basisschriftgröße verwenden wie bei der Codegenerierung.
Was ist die Basisschriftgröße für rem?
Sie legt fest, wie viele px zur Berechnung von 1rem verwendet werden. Der Standardwert ist 16px, und du kannst ihn in den erweiterten Einstellungen auf 1–1000px ändern. Passe ihn an die Schriftgröße des Wurzelelements an, in dem du den Code verwenden willst.
Kann ich gleiche Größen oder negative Werte angeben?
Setze Minimum und Maximum auf denselben Wert für eine konstante Größe. Negative Werte sind nur für margin erlaubt. Größen, die mit breiter werdendem Viewport kleiner werden, werden nicht unterstützt.
Werden Änderungen an Eigenschaften oder Werten sofort übernommen?
Wenn du sie änderst, werden der generierte Code und die Vorschau zurückgesetzt. Drücke „CSS generieren“, um sie zu aktualisieren. Dasselbe gilt, wenn du die Ausgabeeinheit oder die Basisschriftgröße änderst.
Kann ich den Vorschautext ändern?
Der Beispieltext und „Aa 123“ sind beide fest. Es gibt keine Funktion zum Bearbeiten von Text. Prüfe den tatsächlichen Text und die Anzeigebreite auch auf der Seite, die das generierte CSS verwendet.
Eingabe und Ergebnisse
- Viewport-Breite
- 1–100000px. Die kleinere Viewport-Breite muss kleiner als die größere sein. Dezimalzahlen werden ebenfalls akzeptiert.
- Größe
- 0–10000px. Nur margin kann bis −10000px gehen. Die Größe für den kleineren Viewport darf nicht größer als die für den größeren sein.
- Ausgabe
- Eine CSS-Deklaration und eine beliebige Tailwind-Eigenschaft. Speichere alle 2 Elemente als css-clamp-generator.txt.
- Genauigkeit
- Die generierte Formel verwendet Koeffizienten mit bis zu 13 signifikanten Stellen. Ein Fehler tritt bei Breiten auf, die so nah beieinander liegen, dass die gerundete Formel die Referenzpunkte nicht reproduzieren kann.