• test caroussel
  • test caroussel
  • test caroussel
  • test caroussel
  • test caroussel

Post 1

This is the content of post 1

test caroussel

Post 2

This is the content of post 2

test caroussel

Post 3

This is the content of post 3

test caroussel

Post 1

This is the content of post 1

test caroussel

Post 2

This is the content of post 2

test caroussel

Post 3

This is the content of post 3

test caroussel

Calculateur CSS clamp() : créer des tailles fluides sans media queries

px
px
rem
rem
clamp(...)

Comment utiliser ce calculateur ?

La fonction CSS clamp() permet de rendre une typographie fluide : le texte grossit ou rétrécit harmonieusement entre une taille minimum et maximum, sans avoir besoin de multiples "media queries".

1. La taille racine (Root Font Size)

Ce paramètre définit la base de calcul de vos unités rem.

Option A : 100% (16px) — Recommandé

C'est le réglage par défaut de tous les navigateurs. Si vous n'avez pas touché à la propriété html dans votre CSS, choisissez ceci.

Option B : 62.5% (10px) — Pour utilisateurs avancés

Cette technique facilite le calcul mental : 1rem = 10px (au lieu de 16px).

Pourquoi 62.5% et pas simplement "10px" ?
Pour l'accessibilité. Si un utilisateur malvoyant a configuré son navigateur avec une police par défaut plus grande, définir "10px" en dur écraserait son choix. Le pourcentage (62.5%) respecte sa configuration proportionnellement.

Attention : 10px étant trop petit pour lire, vous devez redéfinir la taille du corps de page (Body) par la suite :

html /* Base 10px */
body /* Rétablit à 16px */

2. Les largeurs d'écran (Viewport Widths)

Définissez la plage dans laquelle le texte doit être fluide.

  • Minimum (ex: 375px) : Largeur d'un téléphone mobile standard. En dessous, le texte ne rétrécira plus.
  • Maximum (ex: 1200px) : Largeur d'un ordinateur portable ou bureau. Au-dessus, le texte ne grossira plus.

3. Les tailles de police (Font Sizes)

Choisissez la taille exacte que vous souhaitez obtenir aux deux extrémités définies ci-dessus (en pixels ou rem). Le calculateur générera la formule mathématique pour faire la transition entre les deux.

4. Le résultat CSS

Copiez le code généré. La fonction ressemble à ceci :
clamp(minimum, valeur_fluide, maximum).

Le navigateur choisira automatiquement la valeur centrale, mais s'assurera qu'elle ne descend jamais sous le minimum ni ne dépasse le maximum.