Quelles approches connaissez-vous pour créer un…

Requêtes média : Utilisation des règles CSS @media pour appliquer des styles en fonction des caractéristiques de l’appareil (largeur, hauteur de l’écran, orientation, etc.).
```
/* Exemple de requête média */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}
```

Mise en page en grille flexible (Grid flexible) : Création de maquettes en utilisant des unités relatives (%, vw, vh) et des propriétés flexibles (flex, grid).

/* Exemple de Flexbox */
.parent {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de passer à une nouvelle ligne */
}

.child {
  flex: 1 1 200px; /* Permet à l’élément de s’étirer, de se compresser et d’avoir une largeur de base */
}

Images et médias flexibles : Utilisation des propriétés CSS max-width pour que les images et autres médias se redimensionnent proportionnellement.

/* Exemple d’image flexible */
img {
  max-width: 100%; /* L’image ne dépassera pas la largeur du conteneur parent */
  height: auto;    /* Conserve les proportions */
}

Mobile-First vs. Desktop-First :
- Mobile-First : Le style est conçu d’abord pour les appareils mobiles, puis étendu pour les grands écrans à l’aide de min-width dans les requêtes média. Considéré comme une bonne pratique, car il simplifie la stylisation pour les ressources limitées des mobiles et améliore la performance.
- Desktop-First : Le style est conçu d’abord pour les ordinateurs de bureau, puis réduit pour les petits écrans à l’aide de max-width dans les requêtes média.
Détection des fonctionnalités (Feature Detection) : Utilisation de JavaScript pour détecter les capacités du navigateur ou de l’appareil (par exemple, support de l’interface tactile) et appliquer des styles ou fonctionnalités appropriés. Des outils comme Modernizr peuvent aider.
Typographie réactive : Modification de la taille de la police et de la hauteur de ligne en fonction de la taille de l’écran, souvent avec des unités relatives (em, rem, vw) et des requêtes média.
```
/* Exemple de typographie réactive */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}
```
Détection côté serveur : Identification du type d’appareil ou de navigateur sur le serveur et envoi de la version appropriée de la page ou des styles. Moins courant dans le développement frontend moderne.

Quelles approches connaissez-vous pour créer un design adaptatif?