Comment créer une mise en page fluide de 3 colonnes à 1 colonne sans requêtes multimédias ?

Sans requêtes média : obtenir une mise en page fluide de bureau à 3 colonnes vers une mise en page mobile à 1 colonne

Les requêtes média traditionnelles jouent un rôle crucial dans l'adaptation mises en page de sites Web sur différentes tailles d’écran. Cependant, dans le but de créer un design véritablement fluide et réactif, on souhaite explorer des solutions alternatives qui éliminent le besoin de requêtes multimédias.

Considérez un site Web avec une disposition à 3 colonnes sur les ordinateurs de bureau :

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

Sur mobile, cependant, la mise en page devrait se transformer en une seule colonne :

|
---|
| 1 |
| 2 |
| 3 |

Pour y parvenir de manière dynamique, les puissantes fonctionnalités de CSS viennent à la rescousse :

Grille et pince

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

La fonction repeat() crée un nombre spécifié de colonnes, et clamp() garantit un minimum de 1 colonne lorsque la fenêtre d'affichage se rétrécit en dessous de 500 px.

Flexbox et marge négative

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

Cette approche garantit que les éléments s'alignent côte à côte sur des écrans plus grands mais s'empilent verticalement sur des écrans plus étroits. La marge négative crée initialement un chevauchement, qui est corrigé en la supprimant sur les écrans plus petits.

Conclusion

En tirant parti de la grille, du clamp, de la flexbox et des marges négatives, il est possible pour créer des mises en page fluides qui s'adaptent de manière transparente entre plusieurs colonnes et une seule colonne, éliminant ainsi le besoin de requêtes multimédias pour les modifications de mise en page de base.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!