Responsive Layouts, weniger Medienanfragen

Responsives Design ist ein Eckpfeiler der modernen Webentwicklung. Medienabfragen sind seit langem unerlässlich, aber die CSS -Fortschritte bieten Techniken, um ihr Vertrauen erheblich zu verringern. Dieser Artikel zeigt, wie reaktionsschnelle Layouts mit minimalen oder sogar null Medienabfragen erstellt werden, was zu einem saubereren, wartbaren Code führt.

Wir werden Flexbox- und Grid-basierte Ansätze untersuchen, um die Reaktionsfähigkeit ohne explizite Abfragebrechungspunkte zu erreichen.

Nutzung von Flexbox und flex-wrap

In einem einfachen Beispiel wird flex: 400px verwendet, um eine Basisbreite für Elemente festzulegen. Elemente wickeln neue Linien ein, wenn unzureichender Platz vorhanden ist. Der verbleibende Raum wird in den Elementen jeder Linie verteilt. flex: 400px ist eine Abkürzung für flex-grow: 1; flex-shrink: 1; flex-basis: 400px; .

Dieser Ansatz bietet Kürze (zwei Codezeilen), es fehlt jedoch eine feinkörnige Kontrolle über konsistente Fußzeilenbreiten, Elemente pro Zeile und Verpackungsverhalten.

Verwendung von auto-fit und minmax mit CSS-Netz

CSS-Gitter unter Verwendung von repeat(auto-fit, minmax(400px, 1fr)) liefert eine ähnliche Basisbreite mit Verpackungsverhalten. Elemente wachsen, um den verfügbaren Platz zu füllen, wobei die konsistenten Breiten über die Reihen hinweg aufrechterhalten werden. Gegenstände können jedoch nicht unter 400 PX schrumpfen, was möglicherweise zu Überlauf führt.

Steuerelemente pro Zeile kontrollieren

In der Verfeinerung des Flexbox -Ansatzes ersetzen wir flex: 400px durch flex: max(400px, (100% - 20px)/3); . Dies beschränkt jede Reihe auf maximal drei Elemente. Der 20px macht zwei Lücken aus (unter der Annahme einer 10px -Lücke zwischen den Elementen). Eine allgemeinere Formel, max(400px, 100%/(N 1) 0.1%) , beseitigt die Notwendigkeit einer explizite Lückeberechnung, wobei N die maximale Anzahl der Elemente pro Zeile darstellt. Dies bietet eine teilweise Kontrolle über Elemente pro Zeile. Das gleiche Prinzip gilt für CSS -Netz.

Sicherstellen, dass Gegenstände wachsen und schrumpfen

Um das Überlaufproblem mit dem Grid -Ansatz zu beheben, verwenden wir clamp(100%/(N 1) 0.1%, 400px, 100%) . Dies stellt sicher, dass die Artikel wachsen, um den verfügbaren Platz zu füllen, aber die Behälterbreite nie überschreiten.

Genau steuern das Verpackung

Um zu kontrollieren, wenn Elemente umwickeln, modifizieren wir die clamp() -Formel an: clamp(100%/(N 1) 0.1%, (400px - 100vw)*1000, 100%) . Wenn die Bildschirmbreite (100 VW) 400 PX überschreitet, haben wir N -Elemente pro Zeile. Unter 400px erhalten wir einen vollbreiten Element pro Zeile und erstellen effektiv einen Haltepunkt ohne Medienabfrage. 400px fungiert hier als Haltepunkt.

Handhabung mehrerer Haltepunkte

Um Übergänge zwischen mehreren Elementzahlen zu verwalten (z. B. von N bis M -Elementen pro Zeile), nisten wir clamp() Funktionen: clamp(clamp(100%/(N 1) 0.1%, (W1 - 100vw)*1000,100%/(M 1) 0.1%), (W2 - 100vw)*1000, 100%) . W1 und W2 repräsentieren Haltepunkte. Dies ermöglicht ein ausgefeiltes Reaktionsverhalten mit einer einzelnen CSS -Erklärung. Weitere Verschachtelung erweitert dies auf weitere Haltepunkte.

Simulation von Containerfragen

Durch das Ersetzen von 100vw durch 100% können wir Containerabfragen simulieren, wodurch das Layout eher auf die Breite des Containers als auf das Ansichtsfenster reagiert.

Erweiterte Techniken

Über die Spaltensteuerung hinaus können wir bedingte Stile erstellen, die auf Elementabmessungen oder Bildschirmgröße basieren.

Bedingte Hintergrundfarbe: Verwenden linearer Gradienten können wir die Hintergrundfarbe basierend auf der Elementbreite bedingt ändern:

 div {
  Hintergrund: Linear -Gradient (grün 0 0) 0 / max (0px, 100px - 100%) 1px, rot;
}

Sichtbarkeit des Elements umschalten: Wir können die Versteckelemente basierend auf der Bildschirmgröße mit clamp() und overflow: hidden; .

Elementposition ändern: Wir können die Elementposition (z. B. top , left ) basierend auf der Bildschirmgröße mit clamp() dynamisch einstellen.

Abschluss

Während Medienabfragen wertvoll bleiben, zeigen diese Techniken, wie sie ein ausgefeiltes Reaktionsdesign mit verringertem Abhängigkeit von ihnen erreichen können. Der Fokus liegt nicht darauf, Medienabfragen vollständig zu beseitigen, sondern auf der Optimierung des Codes und der Nutzung von CSS -Funktionen zum Erstellen von dynamischen und reaktionsschnellen Layouts. Diese Strategien bieten leistungsstarke Kontroll- und sauberere Code und verbessern die Wartbarkeit und Effizienz.

Das obige ist der detaillierte Inhalt vonResponsive Layouts, weniger Medienanfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!