Pince typographique fluide
Générer une échelle de police linéaire CSS entre deux largeurs de fenêtre.
Vos valeurs
Expression de limitation CSS
CSS généré est une valeur initiale. Privilégiez les unités de texte relatives lorsque cela est approprié et testez le zoom, la mise à l'échelle du texte et le débordement.
Comparaison de scénarios
Jusqu'à trois instantanés dans cet onglet. Le chargement d'un instantané remplace les entrées actuelles.
Formule
Utilisez m = 100(f₁−f₀)/(v₁−v₀) et b = f₀−mv₀/100. La taille fluide est clamp(f₀, b + m×vw, f₁) ; f désigne les tailles de police et v désigne les largeurs de la fenêtre d’affichage.
Générer une échelle de police linéaire CSS entre deux largeurs de fenêtre.
Exemple résolu
- Taille minimale de la police (px)
- 16
- Taille maximale de la police (px)
- 24
- Largeur minimale de la fenêtre d'affichage (px)
- 400
- Largeur maximale de la fenêtre d'affichage (px)
- 1200
- Expression de limitation CSS
- clamp(16px, calc(12px + 1vw), 24px)
- Coefficient de la fenêtre d'affichage
- 1 vw
- Interception en pixels
- 12 px
Portée et limites
CSS généré est une valeur initiale. Privilégiez les unités de texte relatives lorsque cela est approprié et testez le zoom, la mise à l'échelle du texte et le débordement.
Les données d'entrée sont vérifiées pour détecter les valeurs manquantes et les plages autorisées. Un résultat hors de la plage numérique finie n'est pas affiché. L'arrondi affecte l'affichage, tandis que le calcul utilise la précision numérique du modèle.
Vérifiez vos unités et vos hypothèses avant de vous fier à un résultat. Modifier une étiquette ne convertit pas une devise ni une unité physique.
Version de la formule.: c81b657b101d · Exemple vérifié.: