Générateur CSS clamp
Saisissez les largeurs de fenêtre et les tailles pour les petits et grands écrans afin de générer du CSS qui fait varier progressivement la taille du texte ou l’espacement. Prévisualisez la sortie en px ou rem, puis copiez le CSS et le code Tailwind ou enregistrez-les sous forme de texte.
Ce que vous pouvez faire
Indiquer deux couples de largeur et de taille
Indiquez les tailles pour une fenêtre étroite et une fenêtre large. Six types sont pris en charge : taille de police, espace, remplissage, marge, largeur et hauteur.
Générer du code en px ou rem
Saisissez toutes les valeurs en px, puis choisissez px ou rem en sortie. Obtenez une déclaration CSS et du code de propriété arbitraire Tailwind.
Vérifier immédiatement le CSS généré
Le CSS est appliqué à deux éléments dans l’aperçu. Vérifiez l’apparence du texte et de l’espacement à la largeur actuelle du cadre.
Mode d’emploi
Choisir la propriété à modifier
Choisissez la propriété CSS à définir, par exemple font-size pour la taille du texte ou gap pour l’espacement entre les éléments.
Saisir deux largeurs de fenêtre et deux tailles
Saisissez les deux largeurs de fenêtre et leur taille respective en px. La taille pour la fenêtre la plus petite doit être inférieure ou égale à celle de la fenêtre la plus grande.
Vérifier l’unité de sortie et générer le code
Choisissez px ou rem dans les paramètres avancés. Pour rem, vérifiez également la taille de police de base avant d’appuyer sur « Générer le CSS ».
Prévisualiser et récupérer le code
Copiez le CSS et collez-le à l’endroit où vous l’utiliserez. Ouvrez le code Tailwind pour le récupérer. Vous pouvez également copier les deux éléments ensemble ou les enregistrer sous forme de texte.
Utile pour
Faire varier progressivement la taille des titres
Définir des tailles de texte pour des fenêtres étroites et larges et les faire varier progressivement entre ces largeurs au lieu de procéder par paliers.
Adapter l’espacement à la fenêtre
Faire varier l’espacement des cartes ou leur marge intérieure entre les tailles minimale et maximale définies.
Définir des tailles fluides et lire l’aperçu
Les trois valeurs de clamp
clamp est une fonction CSS qui définit une valeur minimale, une valeur fluide et une valeur maximale. La formule générée relie deux points de référence par une expression linéaire et limite les tailles hors de la plage aux tailles des extrémités.
Saisie en px ; sortie en px ou rem
Les largeurs de fenêtre et les tailles sont saisies en px. Pour une sortie en rem, les tailles et le terme fixe sont divisés par la taille de police de base, tandis que le coefficient vw de la largeur de fenêtre reste inchangé.
Adapter la base rem à l’endroit où le code est utilisé
Par défaut, le code considère que 1 rem vaut 16 px. Si la taille de police de l’élément racine est différente à l’endroit où vous utilisez le code, les tailles aux extrémités et leur variation diffèrent également. Vérifiez-les aussi à cet endroit.
Le cadre d’aperçu définit la largeur de fenêtre
L’aperçu est un cadre d’affichage indépendant. Il calcule vw à partir de la largeur à l’intérieur du cadre, et non de celle de l’écran entier. Selon la propriété, le même CSS généré est appliqué au texte, à l’espace entre les deux éléments, à l’espacement ou aux dimensions des éléments.
Vérifier également l’endroit où le code est utilisé
Le texte et la structure de l’aperçu sont fixes. Vérifiez également les polices, les textes longs, les retours à la ligne et l’agrandissement du texte par le navigateur à l’endroit où vous utilisez le code. Le code Tailwind utilise le format de propriété arbitraire ; vérifiez aussi qu’il est reconnu et généré à cet endroit.
Foire aux questions
Que se passe-t-il en dehors de la plage de largeur de fenêtre indiquée ?
Les largeurs inférieures à la plus petite largeur indiquée utilisent la taille minimale ; celles qui dépassent la plus grande largeur indiquée utilisent la taille maximale. Pour rem, vous devez utiliser la même taille de police de base que lors de la génération du code.
Quelle est la taille de police de base pour rem ?
Cette valeur indique le nombre de pixels utilisés pour calculer 1 rem. La valeur par défaut est 16 px et vous pouvez la modifier entre 1 et 1 000 px dans les paramètres avancés. Utilisez la taille de police de l’élément racine à l’endroit où vous utiliserez le code.
Puis-je indiquer des tailles égales ou des valeurs négatives ?
Définissez la même valeur minimale et maximale pour obtenir une taille constante. Les valeurs négatives sont autorisées uniquement pour margin. Les tailles qui diminuent lorsque la fenêtre s’élargit ne sont pas prises en charge.
Les modifications des propriétés ou des valeurs sont-elles appliquées immédiatement ?
Toute modification efface le code généré et l’aperçu. Appuyez sur « Générer le CSS » pour les mettre à jour. La même règle s’applique en cas de changement de l’unité de sortie ou de la taille de police de base.
Puis-je modifier le texte de l’aperçu ?
Le texte d’exemple et « Aa 123 » sont fixes. La modification du texte n’est pas prise en charge. Vérifiez également le texte réel et la largeur d’affichage sur la page qui utilise le CSS généré.
Saisie et résultats
- Largeur de la fenêtre
- 1–100 000 px. La largeur de fenêtre la plus petite doit être inférieure à la plus grande. Les décimales sont également acceptées.
- Taille
- 0–10 000 px. Seule margin peut descendre jusqu’à −10 000 px. La taille pour la fenêtre la plus petite doit être inférieure ou égale à celle de la fenêtre la plus grande.
- Résultat
- Une déclaration CSS et une propriété arbitraire Tailwind. Enregistrez les deux éléments dans css-clamp-generator.txt.
- Précision
- La formule générée utilise des coefficients comportant jusqu’à 13 chiffres significatifs. Une erreur se produit notamment lorsque les largeurs sont si proches que la formule arrondie ne peut pas reproduire les points de référence.