Catégorie: Développement
Générateur d'échelle d'espacement fluide
Construisez un jeu de jetons d'espacement basés sur clamp()
Donnez une taille d'espacement de base pour un viewport étroit et un viewport large, ainsi qu'un ratio d'échelle, et obtenez un jeu complet de propriétés personnalisées --space-*, chacune avec son propre clamp() qui varie en douceur entre les deux, prêt à coller dans :root.
| Jeton | Sortie |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}Chaque jeton a son propre clamp(), afin que chaque palier varie en douceur entre les deux largeurs de viewport.
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
Un seul clamp() fluide est utile pour une valeur, mais la plupart des mises en page ont besoin de toute une échelle de paliers d'espacement cohérents, et écrire un clamp() à la main pour chacun multiplie les mêmes erreurs de calcul sur chaque jeton. Cet outil part d'une taille de base à chaque extrémité de votre plage de viewport et d'un ratio, puis génère une échelle symétrique de jetons autour d'un palier central, de la même façon qu'une échelle typographique est construite, afin que tout le jeu reste proportionnellement cohérent quand le viewport change.
Mode d'emploi
- Définissez la taille d'espacement de base aux largeurs de viewport étroite et large.
- Définissez le ratio d'échelle entre les paliers.
- Copiez le bloc :root généré des propriétés personnalisées --space-*.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Pourquoi neuf paliers ?
- Neuf donne quatre paliers en dessous et quatre au-dessus d'une valeur centrale, ce qui couvre la plupart des mises en page, des petits espaces en ligne aux grands espacements de section, sans avoir à inventer de nouveaux noms plus tard.
- Quelque chose est-il envoyé à un serveur ?
- Non. Chaque clamp() est calculé dans la page à partir des nombres que vous saisissez, d'où la mise à jour instantanée du tableau et du CSS généré.
- Puis-je utiliser ceci avec le Générateur de clamp CSS ?
- Oui. Cet outil construit toute une échelle à partir d'un seul jeu de réglages ; le Générateur de clamp CSS sert pour une valeur ponctuelle unique, comme une taille de titre, en utilisant les mêmes calculs sous-jacents.