Wie erstelle ich ein flüssiges Rasterlayout mit 3-Spalten-Desktop und 1-Spalten-Mobiltelefon ohne Medienabfragen?

3-Spalten-Desktop- und 1-Spalten-Mobile-Layout ohne Medienabfragen erreichen

Problem:
Wie können wir erstellen ein flüssiges Rasterlayout, das von einem 3-Spalten-Desktop-Layout zu einem 1-Spalten-Mobillayout wechselt, ohne auf Medien angewiesen zu sein Abfragen?

Lösung:
CSS ermöglicht dynamische Layoutanpassungen, ohne auf Medienabfragen angewiesen zu sein. So geht's:

1. Verwendung von Clamp() und Flex:
In Ihrem ersten CSS haben Sie clamp() in der Eigenschaft „grid-template-columns“ verwendet, um je nach Bildschirmgröße von „repeat(3)“ zu „repeat(1)“ zu wechseln. Allerdings liefert „clamp()“ allein nicht das gewünschte Ergebnis. Stattdessen können wir „clamp()“ innerhalb der Flex-Basis-Eigenschaft von Flex-Elementen verwenden, um ein Umhüllungsverhalten zu erzeugen:

.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. Passen Sie die Formel entsprechend der Bildschirmgröße an:
In diesem Code stellt 400 Pixel die Bildschirmgröße dar, bei der das Layout von 3 Spalten auf 1 Spalte wechseln soll. Sie können diesen Wert basierend auf Ihrem gewünschten Haltepunkt anpassen. Um beispielsweise auf 500 Pixel zu wechseln, ersetzen Sie 400 Pixel durch 500 Pixel.

3. Erläuterung der Berechnung:
Die Formel max(0px, (400px - 100vw) * 1000) stellt sicher, dass die Flex-Basis jedes Elements bei 0px bleibt, wenn die Breite des Ansichtsfensters größer als 400px ist. Dadurch bleiben sie in einem 3-Spalten-Layout nebeneinander. Wenn jedoch die Breite des Ansichtsfensters unter 400 Pixel abnimmt, wird die Flex-Basis zu einem großen Wert, wodurch die Elemente effektiv auf separate Zeilen verschoben werden, was zu einem 1-Spalten-Layout führt.

Durch die Verwendung von clamp() auf diese Weise wird Sie können ein flüssiges und reaktionsfähiges Layout erreichen, das sich an unterschiedliche Bildschirmgrößen anpasst, ohne dass Medienabfragen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein flüssiges Rasterlayout mit 3-Spalten-Desktop und 1-Spalten-Mobiltelefon ohne Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!