Dans le développement web moderne, nous avons deux approches : les mises en page adaptatives et réactives.

Les mises en page réactives sont conçues pour avoir plusieurs variations d'affichage qui peuvent passer en douceur de l'une à l'autre, permettant un étirement et un redimensionnement flexibles des éléments. Lorsque la taille de la fenêtre d'affichage est modifiée, les blocs de la page se contractent ou s'étirent en douceur, et à un point de rupture spécifique, ils changent de positionnement pour optimiser l'utilisation de l'espace horizontal.

Les mises en page adaptatives ont plusieurs variations d'affichage, mais les changements de conception se produisent par des sauts fixes entre les points de rupture. Une fois qu'un point de rupture est atteint, la conception ne peut pas être modifiée jusqu'à ce que le point de rupture suivant soit atteint.

Pratique

Pratiquons et créons 2 éléments div. Le premier élément aura la mise en page adaptative, et le second aura la mise en page réactive. De plus, nous devons ajouter différentes valeurs pour la propriété background-color avec le changement d'écran.

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

Le HTML ressemble à :

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

Pour la mise en page adaptative, nous devons également spécifier une largeur spécifique pour l'élément div.

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

Le CSS ressemble à :

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;
  }
}

Le résultat que nous obtenons. Veuillez prêter attention au changement de largeur de l'écran dans la partie supérieure de l'enregistrement :