Schneller Tipp: Versand widerstandsfähiger CSS -Komponenten

Dieser Artikel zeigt, wie Containerabfragen in CSS widerstandsfähige, wiederverwendbare Komponenten mit eingebauten Layout-Variationen erzeugen und einen "Erstellen einmaligen, überall einsetzen" -Ansatz erreichen. Das Beispiel konzentriert sich auf eine Abonnementform, die sich an verschiedene Bildschirmgrößen anpasst.

Das Formular verwendet CSS -Gitter zur Layoutflexibilität. Es werden drei Gitterbereiche (Legende, Feld, Senden) definiert, und ihre Anordnung ändert sich auf der Grundlage der Breite des Containers unter Verwendung von Containerabfragen. Ein Video zeigt die Layoutanpassungen.

Das .subscription-form Element wird als Container mit container-type: inline-size; bezeichnet. Ein verschachtelter .form__content div wird durch die Containerabfragen gezielt:

<code class="language-css">.subscription-form {
  container-type: inline-size;
}

.form__content {
  display: grid;
  gap: 1rem;
}</code>

Eine erste Containerabfrage (@container (min-width: 375px)) definiert die Gittervorlage für mittelgroße Layouts:

<code class="language-css">@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend field" 
            "legend submit";
    align-items: center;
    column-gap: 2rem;
  }
  /* ... grid area assignments for legend, .form-group, button ... */
}</code>

Eine zweite Abfrage (@container (min-width: 700px)) passt das Layout für größere Bildschirme an:

<code class="language-css">@container (min-width: 700px) {
  .form__content {
    grid-template-areas: "legend field submit";
  }
  button {
    align-self: end;
  }
}</code>

Ein anderes Video zeigt das reaktionsschnelle Verhalten.

Eine Codepen -Demo liefert ein lebendes, interaktives Beispiel. Dieser Ansatz zeigt die Leistung von Containerabfragen zum Erstellen wiederverwendbarer und anpassungsfähiger CSS -Komponenten. Dieser Auszug stammt von , um die Kraft von CSS zu entfesseln.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Versand widerstandsfähiger CSS -Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!