Que doit-on spécifier en CSS pour configurer et…

La requête média @media est utilisée. Elle définit des conditions pour appliquer des styles, basées sur les caractéristiques de l'appareil ou de la zone d'affichage.

Principaux paramètres des requêtes média :

width / height : Largeur / hauteur de la zone d'affichage.
min-width / min-height : Largeur / hauteur minimales de la zone d'affichage.
max-width / max-height : Largeur / hauteur maximales de la zone d'affichage.
orientation : Orientation de l'appareil (portrait ou landscape).

Exemple d'utilisation pour configurer les points de rupture :

/* Styles par défaut pour les écrans de moins de 768px */
body {
  font-size: 16px;
}

/* Point de rupture pour les écrans de 768px à 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Point de rupture pour les écrans de 992px et plus */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Stratégies couramment utilisées pour définir les points de rupture :

Mobile First : On définit d'abord les styles pour les plus petits écrans, puis on ajoute des requêtes média avec min-width pour les écrans plus larges.
Desktop First : On définit d'abord les styles pour les grands écrans, puis on ajoute des requêtes média avec max-width pour les écrans plus étroits.

Le choix de la stratégie dépend du projet et des préférences.

Valeurs standard approximatives pour les points de rupture (dépend du framework ou de l'accord) :

Appareil	Plage de largeur	Requête média (Mobile First)	Requête média (Desktop First)
Petits téléphones	< 576px	Non applicable (styles de base)	`@media (max-width: 575.98px)`
Téléphones	>= 576px	`@media (min-width: 576px)`	`@media (max-width: 767.98px)`
Tablettes	>= 768px	`@media (min-width: 768px)`	`@media (max-width: 991.98px)`
Ordinateurs portables	>= 992px	`@media (min-width: 992px)`	`@media (max-width: 1199.98px)`
Ordinateurs de bureau	>= 1200px	`@media (min-width: 1200px)`	`@media (max-width: 1399.98px)`
Grands ordinateurs	>= 1400px	`@media (min-width: 1400px)`	Non applicable (styles de base)

Il est important de choisir les points de rupture en fonction du contenu et du design, pas seulement des standards d'appareils. Ils doivent s'activer lorsque le design commence à 'casser'.

Que doit-on spécifier en CSS pour configurer et appliquer ces points de rupture?