Compagnon de code

CSS : l'essentiel, avec style !

Leçons :

Découverte & Sélecteurs

18:11

Styliser les textes

18:47

Comprendre les couleurs

14:11

Les backgrounds Color

10:49

Les modèles de boîtes

25:10

Notion de Clamp, le min et le max

09:12

Arrondis et Hover

14:57

Les Display

09:21

Invisibilité & Morale

08:57

Transformer des éléments ?

15:29

Les Positions

24:18

Positions & Précautions

08:11

MEP : Les positions

22:37

Les bases de Flexbox

36:54

MEP : un dé en flexbox

27:06

MEP : des cartes flexibles

19:08

Les animations en CSS

21:03

MEP : un système solaire animé

27:00

MEP : Un texte qui défile ?

09:12

MEP : un loader... des points sauteurs !

07:38

Sélectionner un enfant

07:04

Les variables CSS

15:42

Responsivité et Media Queries

19:36

Enoncé Exercice Twitter

05:15

Un clone de Twitter

54:11

Un site complet et Responsive en HTML / CSS

02:12:46

Notice

=> leçons

=> express

=> exercices

=> projets

Min & Max ou Clamp ?

 

Un élément peut être trop grand sur grand écran et trop petit sur mobile.

Donnons lui une taille "responsive", une taille qui s'adapte à celle de l'écran.

 

 

Solution 1 : min et max  

 

.box {
    width: 50vw;
    min-width: 300px;
     max-width: 600px;
 }
 
 
La boîte fait 50% de la largeur de l’écran, mais ne descend pas sous 300px et ne dépasse pas 600px.
 
 

Solution 2 : clamp()

 
.box {
   width: clamp(300px, 50vw, 600px);
}
 
 
clamp() simplifie min et max en une seule ligne :
Entre 300px et 600px, en visant 50vw.
 
 
 

Bonus pour la route : aspect-ratio

 
.box {
     aspect-ratio: 1 / 1; /* Carré */
     aspect-ratio: 16 / 9; /* Format écran large */
     aspect-ratio: 4 / 3; /* Ancien format TV */
 }

 

aspect-ratio permet de garder un ratio fixe sans se soucier de la hauteur.

 

 

À retenir : clamp() rend le responsive plus simple et

aspect-ratio évite de fixer la hauteur manuellement !

Écrit en 02/25 par Christophe C.

Mis à jour en 02/25

Commentaires

Ajoutez un commentaire