Wie erreicht man ein 3-Spalten-Desktop-Layout zu einem 1-Spalten-Mobile-Layout ohne Medienabfragen?

Erreichen eines 3-spaltigen Desktop-Layouts zu einem 1-spaltigen mobilen Layout ohne Medienabfragen

Das Erstellen flexibler Layouts, die sich an verschiedene Bildschirmgrößen anpassen, ist eine häufige Herausforderung beim Webdesign. Obwohl Medienabfragen eine zuverlässige Lösung sind, können sie unnötige Haltepunkte im Layout einführen. In diesem Artikel wird ein alternativer Ansatz zum Erreichen eines 3-Spalten-Desktop-Layouts gegenüber einem 1-Spalten-Layout für Mobilgeräte untersucht, ohne auf Medienabfragen zurückgreifen zu müssen.

Problem:

Oft wünschen Websites ein 3-Spalten-Layout für den Desktop. Spaltenlayout auf dem Desktop, Übergang zu einem einspaltigen Layout auf Mobilgeräten. Beim Übergang vom Mehrspalten- zum Einspalten-Layout kommt es jedoch zu einem Zwischenstadium, in dem die Spalten schmaler und verzerrter werden. Versuche, clamp(), minmax() und andere Funktionen zu verwenden, führen oft zu unbefriedigenden Ergebnissen.

Lösung:

Die vorgeschlagene Lösung nutzt Flex-Basis mit einer Formel, die Erstellt effektiv einen Haltepunkt ohne Medienabfrage. Die Formel lautet:

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

Um beispielsweise einen Haltepunkt bei einer Bildschirmgröße von 400 Pixel zu erstellen:

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

Wenn der Bildschirm breiter als 400 Pixel ist, gibt die Formel 0 Pixel zurück. Stellen Sie sicher, dass die Spalten nicht beeinträchtigt werden. Andernfalls wird ein großer Wert zurückgegeben, wodurch effektiv ein Zeilenumbruch erzwungen und ein einspaltiges Layout erstellt wird.

Implementierung:

Wenden Sie die Formel auf die Flex-Basis an der untergeordneten Elemente des Containers:

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

Dieser Ansatz macht explizite Medienabfragen überflüssig und sorgt gleichzeitig für einen reibungsloseren Übergang zwischen Spaltenlayouts.

Das obige ist der detaillierte Inhalt vonWie erreicht man ein 3-Spalten-Desktop-Layout zu einem 1-Spalten-Mobile-Layout ohne Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!