Wie erstelle ich ein flüssiges 3- bis 1-Spalten-Layout ohne Medienabfragen?

Ohne Medienabfragen: Erreichen eines flüssigen 3-Spalten-Desktop- und 1-Spalten-Mobillayouts

Traditionelle Medienabfragen spielen eine entscheidende Rolle bei der Anpassung Website-Layouts für verschiedene Bildschirmgrößen. Um jedoch ein wirklich flüssiges und ansprechendes Design zu erstellen, besteht der Wunsch, alternative Lösungen zu erkunden, die Medienabfragen überflüssig machen.

Stellen Sie sich eine Website mit einem 3-Spalten-Layout auf Desktops vor:

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

Auf Mobilgeräten sollte sich das Layout jedoch in eine einzelne Spalte verwandeln:

|
---|
| 1 |
| 2 |
| 3 |

Um dies dynamisch zu erreichen, ist CSS leistungsstark Funktionen kommen zur Rettung:

Gitter und Klammer

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

Die Funktion „repeat()“ erstellt eine bestimmte Anzahl von Spalten und „clamp()“ sorgt für ein Minimum 1 Spalte, wenn das Ansichtsfenster unter 500 Pixel verkleinert wird.

Flexbox und Negativ Rand

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

Dieser Ansatz stellt sicher, dass Elemente auf größeren Bildschirmen nebeneinander ausgerichtet werden, auf schmaleren jedoch vertikal gestapelt werden. Der negative Rand führt zunächst zu Überlappungen, die durch Entfernen auf kleineren Bildschirmen korrigiert werden.

Fazit

Durch die Nutzung von Raster, Klemme, Flexbox und negativen Rändern ist dies möglich um flüssige Layouts zu erstellen, die sich nahtlos zwischen mehreren Spalten und einer einzelnen Spalte anpassen, sodass keine Medienabfragen für grundlegende Layoutänderungen erforderlich sind.

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