Outils de design

Générateur de serrage CSS — Tailles adaptées aux fluides

À partir des largeurs de fenêtre min/max et d'une plage de tailles cible, calculez une formule clamp() pour les tailles de police fluides, l'espacement et d'autres longueurs qui évoluent avec la fenêtre.

Accès rapide→Convertisseur d'unités CSS

CSSclampAdaptatif

Accès rapide:Convertisseur d'unités CSS Règle de pixels

Ajouter cet outil aux favoris

Aucun mode de stockage des favoris n’a été sélectionné.

Actions rapides

Retour à Outils de design Parcourir tous les outils

Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.

Cas d’usage

Générer un type de corps qui évolue avec la fenêtre
Définir les plages min/max rem pour titres
Remplacez certains espacements de requête multimédia par clamp

Mode d’emploi

Définissez les largeurs minimale et maximale de la fenêtre d'affichage
Définissez les tailles min/max (rem) correspondantes et la taille de la police racine
Copier la formule clamp()

Exemples d’entrée et de sortie

Conditions

Fenêtre 320–1 200 px, taille 1–2,5 rem, racine 16 px

CSS

clamp(1rem, 0.45rem + 2.72vw, 2.5rem)

FAQ

Comment est la formule calculé ?

Sur la plage de fenêtre donnée, une pente linéaire mappe la taille du minimum au maximum, puis une pince (min, préférée, maximum) coiffe les extrémités.

Est-ce uniquement pour les tailles de police ?

Non. N'importe quelle longueur que vous exprimez en plages rem fonctionne : taille de police, espacement, largeur et similaires.

Outils

Outils associés

Poursuivez avec un autre outil traduit pour une tâche proche.

Convertisseur d'unités CSS

Convertisseur d'unités CSS — px, rem, em, vw

Disponible

Convertissez entre px, rem, em, pt, vw, vh et %. Personnalisez la taille de la police racine, la taille de la police parent et la taille de la fenêtre d'affichage pour un travail réactif et un transfert de la conception au code.

CSS Unités Conversion

Ouvrir l’outil

Règle de pixels

Règle de pixels — Taille de l'écran et graduations

Disponible

Dessinez une règle de pixels horizontale ou verticale sur la page. Ajustez la longueur et l'espacement des graduations, et affichez la taille de la fenêtre ainsi que le rapport en pixels de l'appareil pour vérifier les mesures de pixels CSS par rapport aux mises en page et aux maquettes.

Pixels Règle Mesurer

Ouvrir l’outil