Pouvez-vous obtenir des dispositions de colonnes fluides sans requêtes multimédias ?

Réaliser des mises en page de colonnes fluides sans requêtes multimédias

Les techniques CSS modernes offrent des options polyvalentes pour créer des mises en page réactives qui s'adaptent de manière fluide aux différentes tailles d'écran. Cela élimine le besoin de plusieurs requêtes multimédias et permet la création de mises en page qui circulent de manière transparente sur tous les appareils.

Dans cet article, nous explorons comment réaliser un scénario de mise en page spécifique : une mise en page à trois colonnes sur la vue du bureau, une transition à une mise en page à une seule colonne sur la vue mobile, sans recourir aux requêtes multimédias.

Le défi

Le Le principal défi réside dans la transition en douceur d'une disposition à trois colonnes à une disposition à une seule colonne. Lorsque la fenêtre d'affichage se rétrécit, les colonnes doivent se réduire en une seule colonne, évitant ainsi toute étape intermédiaire gênante.

La solution

La solution consiste à utiliser la combinaison de flexbox et de fonction clamp(). Nous définissons les éléments flexibles à envelopper avec flex-wrap: wrap;, puis utilisons clamp() dans la propriété flex-basis pour déterminer la largeur de chaque élément flexible en fonction de la largeur de la fenêtre d'affichage.

Le Code

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

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

Comment ça marche

• Le La fonction clamp() prend trois arguments : une valeur minimale, une valeur préférée et une valeur maximale.
• Dans ce scénario, nous définissons la valeur minimale sur 0px, la valeur préférée sur 100 % et la valeur maximale. à (400px - 100vw) * 1000.
• Lorsque la largeur de la fenêtre d'affichage est supérieure à 400px, la fonction clamp() renvoie la valeur préférée de 100 %, ce qui donne trois colonnes de largeur égale.
• À mesure que la largeur de la fenêtre d'affichage diminue en dessous de 400 px, la fonction clamp() renvoie une valeur proportionnelle à la différence entre 400 px et la largeur actuelle de la fenêtre d'affichage.
• Cela force les éléments flexibles à s'enrouler sur plusieurs lignes, créant ainsi une seule colonne. mise en page.

Conclusion

En utilisant la fonction clamp() et flexbox, nous pouvons créer des mises en page réactives qui s'adaptent parfaitement aux différentes tailles d'écran sans avoir besoin de média requêtes. Cette approche offre une expérience plus fluide et conviviale aux visiteurs, garantissant ainsi que votre site Web s'affichera parfaitement sur tous les appareils.

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!