Hören Sie auf, sich mit Medienanfragen herumzuschlagen! Verwenden Sie stattdessen CSS-Containerabfragen

Haben Sie schon einmal eine Komponente erstellt, die in Ihrem Hauptinhalt perfekt aussieht, in der Seitenleiste jedoch nicht funktioniert? ?

Medienabfragen lösen nur die Hälfte des Problems – sie kümmern sich um die Bildschirmgröße und nicht darum, wo sich Ihre Komponente tatsächlich befindet. Hier kommen Containerabfragen ins Spiel.

Was ist falsch an Medienabfragen?

Angenommen, Sie haben diese Kartenkomponente erstellt:

@media (min-width: 768px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

Sieht auf Mobilgeräten und Desktops großartig aus! Bis ... Ihr Teamkollege es in eine schmale Seitenleiste einfügt. Jetzt versucht Ihr „Desktop“-Layout, sich auf einen 300-Pixel-Bereich zu quetschen. Autsch.

Möchten Sie Ihre CSS-Kenntnisse verbessern? Schauen Sie sich „Moderne CSS-Techniken, die mein JavaScript ersetzten“ an, um zu sehen, wie reines CSS komplexen JavaScript-Code ersetzen kann.

Containerabfragen: Der bessere Weg

Anstatt zu fragen „Wie breit ist der Bildschirm?“ fragen Containerabfragen „Wie breit ist mein Container?“ So funktionieren sie:

/* Step 1: Mark the container */
.card-wrapper {
  container-type: inline-size;
}

/* Step 2: Style based on container width */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

Jetzt passt sich Ihre Karte an ihren Behälter an, nicht an den Bildschirm. Platzieren Sie es überall – es funktioniert einfach!

Echtes Beispiel: Eine intelligente Produktkarte

Hier ist eine Produktkarte, die sich jedem Raum anpasst:

<div>





<pre class="brush:php;toolbar:false">.product-wrapper {
  container-type: inline-size;
}

/* Mobile-first: Stack everything */
.product {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Medium container: Side-by-side layout */
@container (min-width: 400px) {
  .product {
    grid-template-columns: 200px 1fr;
  }
}

/* Large container: More sophisticated layout */
@container (min-width: 600px) {
  .product .content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .product .desc {
    grid-column: 1 / -1;
  }
}

Browser-Unterstützung?

Gute Neuigkeiten! Containerabfragen funktionieren in allen modernen Browsern. Bei älteren Browsern wird Ihr mobiles Layout zum Fallback:

/* Default mobile layout */
.product { display: grid; }

/* Enhance for modern browsers */
@supports (container-type: inline-size) {
  /* Container query styles */
}

Möchten Sie diese UI-Details auf den Punkt bringen? „12 Frontend-Mikrointeraktionen, die Benutzer heimlich beurteilen“ enthüllt die subtilen Interaktionen, die dafür sorgen, dass Websites poliert wirken.

Schnelle Tipps

1. Verschachteln Sie Containerabfragen nicht zu tief – das wird unübersichtlich
2. Verwenden Sie inline-size anstelle von size, wenn Sie nur die Breite benötigen
3. Testen Sie Ihre Komponenten in unterschiedlich großen Behältern

Probieren Sie es selbst aus!

1. Wählen Sie eine Komponente aus, die an mehreren Orten vorhanden ist
2. Container-Typ: inline-size zum Wrapper hinzufügen
3. Medienabfragen durch Containerabfragen ersetzen
4. Beobachten Sie, wie es sich automatisch anpasst!

Möchten Sie mehr erfahren?

• MDN-Leitfaden
• Kann ich verwenden – Containerabfragen

Schreiben Sie einen Kommentar, wenn Sie mit Container Queries etwas Cooles erstellen! ?

Das obige ist der detaillierte Inhalt vonHören Sie auf, sich mit Medienanfragen herumzuschlagen! Verwenden Sie stattdessen CSS-Containerabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!