Créer un Portfolio en Grid CSS responsive sans media queries
Créer un Portfolio en Grid CSS responsive sans media queries
Qu'est-ce que la fonction clamp() en CSS ?
La fonction clamp() en CSS est un outil puissant qui permet de définir une taille (pour une police, une largeur, une hauteur, etc.) en fonction de trois valeurs : une valeur minimale, une valeur préférée et une valeur maximale. Cela offre une grande flexibilité pour créer des interfaces qui s'adaptent à différentes tailles d'écran et résolutions.
- min: La taille minimale que l'élément peut prendre.
- pref: La taille préférée que l'élément prendra si l'espace le permet.
- max: La taille maximale que l'élément peut prendre.
Comment ça fonctionne ?
La valeur finale de la propriété sera toujours comprise entre la valeur minimale et maximale.
Le navigateur choisira la valeur la plus proche de la valeur préférée qui rentre dans les contraintes de l'espace disponible.
Pourquoi utiliser la fonction clamp() ?
- Flexibilité : s'adapte à différentes tailles d'écran et résolutions.
- Contrôle précis : Permet de définir des limites minimales et maximales.
- Lisibilité : Le code est plus clair et plus concis que d'utiliser plusieurs médias queries.
Pour aller plus loin :
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
La fonction clamp() en CSS
La fonction clamp() en CSS
Plan détaillé du cours
Leçon 1La fonction clamp() en CSS
12m03
Avis des apprenants