Ein paar Mal Containergröße Anfragen hätten mir geholfen

Die

CSS -Container -Abfrage -Technologie wird immer reifer, und viele Entwickler versuchen, sie auf verschiedene Projekte anzuwenden, auch wenn es sich nur um einfache Experimente handelt. Während die Browser -Unterstützung nicht völlig beliebt ist, ist es in einigen Projekten praktisch genug, aber möglicherweise nicht ausreicht, um Medienanfragen in älteren Projekten vollständig zu ersetzen.

Containerabfrage ist in der Tat sehr bequem! Tatsächlich war ich in ein paar Situationen und war sehr bestrebt, es zu verwenden, aber ich bin durch Browserkompatibilität begrenzt. Wenn zu diesem Zeitpunkt Containerabfrage verwendet werden kann, ist der Effekt besser.

Alle folgenden Demos werden zum Zeitpunkt des Schreibens am besten in Chrome oder Safari betrachtet. Firefox plant, Unterstützung in Version 109 zu bieten.

Fall 1: Kartengitter

Jeder sollte mit diesem Fall vertraut sein, oder? Dies ist ein sehr häufiges Muster, dem wir fast begegnen. Die Wahrheit ist jedoch, dass, wenn Containerabfragen anstelle von Standard -Medienabfragen verwendet werden können, viel Zeit sparen und bessere Ergebnisse erzielen.

Angenommen, Sie müssen ein Kartennetz erstellen, für das jede Karte ein Seitenverhältnis von 1: 1 beibehält:

Das ist schwieriger als es scheint! Das Problem ist, dass die Änderung von Komponenteninhalten basierend auf der Breite der Ansichtsfenster Sie ermöglicht, wie die Komponente auf das Ansichtsfenster reagiert und wie alle anderen Vorfahren auf das Ansichtsfenster reagieren. Wenn Sie beispielsweise die Schriftgröße des Kartentitels abnehmen möchten, wenn er eine bestimmte Inline -Größe erreicht, gibt es keinen zuverlässigen Weg, dies zu tun.

Sie können die Schriftgröße mit VW -Einheiten festlegen, aber die Komponente ist immer noch an die Ansichtsfensterbreite des Browsers gebunden. Dies kann Probleme verursachen, wenn das Kartennetz in anderen Kontexten verwendet wird, die möglicherweise nicht den gleichen Haltepunkt haben.

In meinem eigentlichen Projekt habe ich die JavaScript -Methode übernommen:

1. Hören Sie sich die Größe der Größe an.
2. Berechnen Sie die Breite jeder Karte.
3. Inline -Schriftgröße entsprechend der Kartenbreite hinzufügen.
4. Verwenden Sie EM -Einheiten, um den internen Stil festzulegen.

Es sieht nach viel Arbeit aus, oder? Dies ist jedoch eine stabile Lösung, um die gewünschte Skalierung in verschiedenen Bildschirmgrößen und in verschiedenen Kontexten zu erreichen.

Containerabfrage ist besser, da sie Container -Abfrageeinheiten wie CQW -Einheiten enthält. Wie Sie vielleicht erfahren haben, entspricht 1CQW 1% der Breite des Behälters. Wir haben auch CQI -Einheiten, das ein Maß für die Inline -Breite des Containers ist, und CQB wird für die Breite der Behälterblocks verwendet. Wenn wir also einen 500px breiten Kartenbehälter haben, wird der Wert von 50 cqw als 250px berechnet.

Wenn ich Containerabfrage in meinem Kartenraster verwenden kann, kann ich die .card -Komponente auf den Container einstellen:

<code>.card { 
  container: card / size;
}</code>

Ich kann dann einen internen Wrapper mit Polsterung unter Verwendung von CQW -Einheiten einrichten, die um 10% der Breite von .card:

skaliert werden

<code>.card__inner { 
  padding: 10cqw; 
} </code>

Dies ist eine gute Möglichkeit, den Abstand zwischen dem Kandidatenrand und ihrem Inhalt konsequent zu skalieren, unabhängig davon, wo die Karte in einer bestimmten Ansichtsfensterbreite verwendet wird. Es sind keine Medienanfragen erforderlich!

Eine andere Idee? Verwenden Sie CQW -Einheiten als Schriftgröße des internen Inhalts und wenden Sie dann die Füllung mit EM -Einheiten an:

<code>.card { 
  container: card / size;
}</code>

5CQW ist ein willkürlicher Wert - ich habe gerade einen Wert ausgewählt. Die Polsterung entspricht immer noch 10 cqw, da die EM -Einheit relativ zur .card__inner -Schriftgröße ist!

Hast du es bemerkt? 2EM relativ zu der 5CQW -Schriftgröße auf demselben Container ! Der Container funktioniert anders als wir es gewohnt sind, da die EM -Einheit relativ zum Schriftgrößenwert desselben Elements ist. Ich bemerkte jedoch schnell, dass das Container -Abfragegerät mit dem jüngsten übergeordneten Elternteil (auch einem Container) von zusammenhängt. In diesem Beispiel skaliert 5cqw beispielsweise nicht basierend auf der Breite des

Elements:

.card

Stattdessen skaliert es auf das nächste als Container definierte übergeordnete übergeordnete übergeordnete. Deshalb habe ich eine

<code>.card__inner { 
  padding: 10cqw; 
} </code>

-Warkerin eingerichtet.

.card__inner Fall 2: Wechsellayout

In einem anderen Projekt brauche ich auch eine andere Kartenkomponente. Dieses Mal brauche ich die Karte, um vom horizontalen Layout zum vertikalen Layout zu wechseln, wenn der Bildschirm kleiner wird ... und dann wieder zum horizontalen Layout und wieder zum vertikalen Layout zurückkehren.

Ich habe diesen entmutigenden Job gemacht, damit die Komponente innerhalb von zwei spezifischen Ansichtsfenster -Bereichen ein Porträt wird (ein Gruß an die neue Medien -Abfragebereichsyntax!), Aber das Problem ist, dass sie dann auf die Medienabfrage, die für sie festgelegt ist, und alles andere, was auf die Ansichtsfenster reagiert wird, gesperrt wird. Wir brauchen etwas, das in jeder Situation funktioniert, ohne sich Sorgen darüber zu machen, wo der Inhalt unterbrochen wird!

Containerabfrage kann dieses Problem aufgrund der Verwendung der

-Regel:

leicht lösen: @container

<code>.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} </code>

Eine Abfrage, unendlich glatt:

Aber warte! Es gibt einige Probleme, die Sie sich möglicherweise bewusst sein müssen. Insbesondere kann es schwierig sein, solche Containerabfragen in prop-basierten Designsystemen zu verwenden. Beispielsweise kann diese

-Komponente untergeordnete Komponenten enthalten, die auf Prop stützen, um ihr Erscheinungsbild zu ändern. .info-card

Warum ist das wichtig? Das Porträtlayout der Karte erfordert möglicherweise alternative Stile, aber Sie können die JavaScript -Requisite mit CSS nicht ändern. Daher können Sie den gewünschten Stil wiederholen. Ich habe dies tatsächlich besprochen und wie ich dies in einem anderen Beitrag lösen kann. Wenn Sie Containerabfragen für eine große Anzahl von Stilen verwenden müssen, müssen Sie möglicherweise ein ganzes Designsystem um sie herum erstellen, anstatt zu versuchen, sie in ein vorhandenes Designsystem einzulegen, das sich auf Medienabfragen beruht.

Fall 3: SVG -Schlaganfall

Dies ist ein weiteres sehr häufiges Muster, das ich kürzlich verwendet habe. Angenommen, Sie haben ein Symbol, das mit dem Titel gesperrt ist:

<code>.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}</code>

Auch ohne Medienanfragen ist es einfach, das Symbol gemäß der Größe des Titels zu skalieren. Das Problem ist jedoch, dass das

von SVG in kleineren Größen zu dünn sein kann und in größeren Größen zu dick und zu auffällig sein kann. stroke-width

Ich musste für jede Symbolinstanz Klassen erstellen und anwenden, um seine Größe und die Schlaganfallbreite zu bestimmen. Dies ist in Ordnung, wenn sich das Symbol neben einem Titel befindet, der eine feste Schriftgröße verwendet, aber bei Verwendung eines sich ständig ändernden Flüssigkeitstyps nicht so gut ist.

Die Schriftgröße des Titels kann auf der Ansichtsfensterbreite basieren, sodass das SVG -Symbol entsprechend angepasst werden muss und in jeder Größe ordnungsgemäß funktioniert. Sie können die Schlaganfallbreite relativ zur Schriftgröße des Titels mithilfe von EM -Einheiten einstellen. Wenn Sie sich jedoch an eine bestimmte Reihe von Schlaganfallgrößen halten müssen, funktioniert diese Methode nicht, da sie linear skaliert werden - ohne Medienabfragen in der Ansichtsfensterbreite zu verwenden, können Sie sie nicht an einen bestimmten Wert der Schlaganfallbreite anpassen, ohne auf Medienfragen in der Ansichtsfenster -Breite zurückzugreifen.

Wenn ich jedoch die Möglichkeit habe, Containerabfrage zu verwenden, werde ich dies tun:

<code>.card { 
  container: card / size;
}</code>

Vergleichen Sie diese Implementierungen und sehen Sie, wie die Container -Abfrageversion den Schlaganfall des SVG auf die spezifische Breite erfasst, die ich möchte, basierend auf der Breite des Containers.

Zusätzlicher Inhalt: andere Arten von Containergröße Abfrage

Ok, ich habe dies im eigentlichen Projekt nicht tatsächlich begegnet. Als ich jedoch die Informationen über Containeranfragen genau angesehen habe, bemerkte ich, dass wir andere Inhalte von Containern, die sich auf die Größe des Containers oder die physische Größe beziehen, abfragen können.

Die Beispiele, die ich in diesem Beitrag verwendet habe, hauptsächlich Abfragebreite, maximale und minimale Breite, Höhe, Blockgröße und Inline -Größe.

<code>.card__inner { 
  padding: 10cqw; 
} </code>

Aber MDN skizziert zwei weitere Dinge, die wir abfragen können. Eine ist die Richtung, die viel Sinn macht, weil wir sie in Medienfragen verwendet haben. Gleiches gilt für Containerfragen:

<code>.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} </code>

Das andere ist das Seitenverhältnis, ob Sie es glauben oder nicht:

<code>.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}</code>

Dies ist eine bearbeitbare Demonstration, die verwendet werden kann, um mit diesen beiden Beispielen zu experimentieren:

Ich habe für diese beiden noch keine guten Anwendungsfälle gefunden. Wenn Sie Ideen haben oder der Meinung sind, dass dies Ihnen bei Ihrem Projekt helfen kann, lassen Sie es mich bitte in den Kommentaren wissen!

Das obige ist der detaillierte Inhalt vonEin paar Mal Containergröße Anfragen hätten mir geholfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!