Comment obtenir une disposition de bureau à 3 colonnes sur 1 colonne mobile sans requêtes multimédias ?

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

Créer des mises en page flexibles qui s'adaptent à différentes tailles d'écran est un défi courant en matière de conception Web. Bien que les requêtes multimédias constituent une solution fiable, elles peuvent introduire des points d’arrêt inutiles dans la mise en page. Cet article explore une approche alternative pour obtenir une mise en page de bureau à 3 colonnes sur une disposition mobile à 1 colonne sans recourir aux requêtes multimédias.

Problème :

Souvent, les sites Web souhaitent une présentation à 3 colonnes. disposition en colonnes sur le bureau, transition vers une disposition en colonne unique sur les appareils mobiles. Cependant, lors de la transition d'une disposition à plusieurs colonnes à une disposition à une seule colonne, une étape intermédiaire se produit au cours de laquelle les colonnes deviennent étroites et déformées. Les tentatives d'utilisation de clamp(), minmax() et d'autres fonctions donnent souvent des résultats insatisfaisants.

Solution :

La solution proposée utilise flex-basis avec une formule qui crée efficacement un point d'arrêt sans requête multimédia. La formule est :

max(0px, (target-screen-size - 100vw)*1000)

Par exemple, pour créer un point d'arrêt à une taille d'écran de 400 px :

max(0px, (400px - 100vw)*1000)

Si l'écran est plus large que 400 px, la formule renverra 0px, en s'assurant que les colonnes ne sont pas affectées. Sinon, il renverra une valeur élevée, forçant efficacement un saut de ligne et créant une disposition sur une seule colonne.

Implémentation :

Appliquer la formule à la base flexible des enfants du conteneur :

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

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

Cette approche supprime le besoin de requêtes multimédias explicites tout en offrant une transition plus fluide entre les dispositions de colonnes.

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!