Dans le développement web moderne, deux approches existent : les mises en page adaptatives et responsives.

Les mises en page responsives sont conçues pour proposer plusieurs variantes d’affichage pouvant passer de l’une à l’autre de manière fluide, permettant ainsi une extension et un redimensionnement flexibles des éléments. Lorsque la taille de la fenêtre d’affichage change, les blocs de la page se contractent ou s’étirent en douceur, et à un point de rupture spécifique, leur positionnement change afin d’optimiser l’utilisation de l’espace horizontal.

Les mises en page adaptatives disposent également de plusieurs variantes d’affichage, mais les changements de design s’effectuent par des transitions fixes entre les points de rupture. Une fois un point de rupture atteint, la mise en page ne peut pas être modifiée avant d’atteindre le point de rupture suivant.

Pratique

Création de deux éléments div. Le premier élément utilise une mise en page adaptative, et le second une mise en page réactive. Il est également nécessaire d'attribuer différentes valeurs à la propriété background-color selon la taille de l'écran.

• Pour une largeur de 0 à 320px, la couleur est #7f58af ;
• Pour une largeur de 321px à 600px, la couleur est #64c5eb ;
• Pour une largeur de 601px à 880px, la couleur est #eb4dba ;
• Pour une largeur à partir de 881px, la couleur est #feb326.

Le code HTML est le suivant :

<div class="adaptive"></div>
<div class="responsive"></div>

Pour la mise en page adaptative, il est également nécessaire de spécifier une largeur particulière pour l'élément div.

• Pour une largeur de 321px à 600px, la largeur est de 300px ;
• Pour une largeur de 601px à 880px, la largeur est de 580px ;
• Pour une largeur à partir de 881px, la largeur est de 860px.

Le code CSS est le suivant :

div {
  height: 200px;
  margin: 10px auto;
  background-color: #7f58af;
}

/* ===> Adaptive <=== */

@media screen and (min-width: 321px) {
  .adaptive {
    background-color: #64c5eb;
    width: 300px;
  }
}
@media screen and (min-width: 601px) {
  .adaptive {
    background-color: #eb4dba;
    width: 580px;
  }
}
@media screen and (min-width: 881px) {
  .adaptive {
    background-color: #feb326;
    width: 860px;
  }
}

/* ===> Responsive <=== */

.responsive {
  width: 100%;
}

@media screen and (min-width: 321px) {
  .responsive {
    background-color: #64c5eb;
  }
}
@media screen and (min-width: 601px) {
  .responsive {
    background-color: #eb4dba;
  }
}
@media screen and (min-width: 881px) {
  .responsive {
    background-color: #feb326;
  }
}

Résultat obtenu. Veuillez prêter attention à la modification de la largeur de l'écran dans la partie supérieure de l'enregistrement :