Comment créer une mise en page de grille fluide avec un bureau à 3 colonnes et un mobile à 1 colonne sans requêtes multimédias ?

Réaliser une mise en page de bureau à 3 colonnes et une mise en page mobile à 1 colonne sans requêtes multimédias

Problème :
Comment pouvons-nous créer une disposition de grille fluide qui passe d'une disposition de bureau à 3 colonnes à une disposition mobile à 1 colonne sans recourir aux requêtes multimédias ?

Solution :
CSS permet une mise en page dynamique ajustements de mise en page sans compter sur les requêtes multimédias. Voici comment procéder :

1. Utilisation de Clamp() et Flex :
Dans votre CSS initial, vous avez utilisé clamp() dans la propriété grid-template-columns pour passer de Repeat(3) à Repeat(1) en fonction de la taille de l'écran. Cependant, clamp() seul ne fournit pas le résultat souhaité. Au lieu de cela, nous pouvons utiliser clamp() dans la propriété flex-basis des éléments flex pour créer un comportement d'emballage :

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 100px;
  border: 2px solid;
  background: red;
  flex-basis: max(0px, (400px - 100vw) * 1000);
  flex-grow: 1;
}

2. Ajustez la formule en fonction de la taille de l'écran :
Dans ce code, 400 px représente la taille de l'écran à laquelle la mise en page doit passer de 3 colonnes à 1 colonne. Vous pouvez ajuster cette valeur en fonction du point d'arrêt souhaité. Par exemple, pour passer à 500px, remplacez 400px par 500px.

3. Explication du calcul :
La formule max(0px, (400px - 100vw) * 1000) garantit que la base flexible de chaque élément reste à 0px lorsque la largeur de la fenêtre d'affichage est supérieure à 400px. Cela les maintient côte à côte dans une disposition à 3 colonnes. Cependant, lorsque la largeur de la fenêtre d'affichage diminue en dessous de 400 px, la base flexible devient une valeur élevée, poussant efficacement les éléments sur des lignes séparées, ce qui entraîne une disposition à 1 colonne.

En utilisant clamp() de cette manière, vous pouvez obtenir une mise en page fluide et réactive qui s'adapte à différentes tailles d'écran sans avoir besoin de requêtes multimédias.

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!