Denken in Verhaltensweisen, keine Bildschirmgrößen

Chase McCoy schrieb einen großartigen Artikel über das „Gap -Problem“ beim Erstellen von Projektnetze. Sein Argument kann wie folgt zusammengefasst werden: Wie sollten wir Ränder in CSS verwenden, um den Elementabstand festzulegen? Er wies darauf hin, dass das Gap -Attribut bei Verwendung mit Flexbox beispielsweise nicht perfekt genug ist:

 .Netz {
  Anzeige: Flex;
  Lücke: 10px;
}

Derzeit wird die Verwendung von Lücken mit Flexbox nur in Firefox unterstützt, und ich habe dies in mehreren Projekten vergessen. Achten Sie darauf.

Wie auch immer, mein Lieblingsteil von Chases Blog -Beitrag ist die Technik, die er für Andy Bell erwähnte, um reaktionsschnelle Layouts ohne Medienfragen wie folgt zu erstellen:

 .Netz {
  Anzeige: Grid;
  Raster-Lücke: 10px;
  Grid-Template-Säulen: Wiederholung (Auto-Fill, Minmax (150px, 1fr));
}

Die Funktion dieses CSS -Codes lautet wie folgt:

• Erstellen Sie ein Gitter mit 10px -Lücke zwischen Spalten und Zeilen.
• Die minimale Breite jeder Spalte beträgt 150px.
• Jede Spalte hat die gleiche Breite (1FR).
• Das Netz sollte automatisch so viele Spalten wie möglich füllen.

Das klügste an all dem ist, dass unser Gitter jetzt die Reaktionsfähigkeit aufgrund von minmax effektiv implementiert. Wenn der Browser die Größe der Größe ist, wird das Netz automatisch auf eine geringere Anzahl von Spalten wie folgt eingestellt:

Es ist überhaupt keine Medienanfrage erforderlich! Natürlich gibt es einige andere Möglichkeiten, dies zu tun, aber ich denke, dieser Ansatz ist klug, nicht nur, weil wir Medienfragen vermeiden - sondern weil er uns lehrt, über das Entwerfen und Gebäuden von Komponenten auf eine neue Art und Weise nachzudenken.

Chase fuhr fort:

Anstatt Breakpoints zu verwenden, um die Bildschirmgröße anzugeben, die das Projekt stapeln sollte, geben Sie stattdessen die minimale Größe an, die Elemente vor dem Stapeln haben sollten. Ich mag das, weil es Entwickler dazu ermutigt, aus einer Verhaltenssicht über reaktionsschnelles Design nachzudenken.

"Verhalten und eher Bildschirmgröße" ist eine hervorragende Möglichkeit, über das Design des Komponenten nachzudenken! Viele der Probleme, die ich beim Erstellen von Komponenten für Designsysteme habe, sind, weil ich über Bildschirmgrößen - mobile Geräte, Tablets, Desktops usw. - und den Versuch, diese Komponenten an diese Einschränkungen anzupassen, nachgedacht habe.

Das Denken aus einer Verhaltensperspektive ist immer effektiver, da es viele andere Faktoren gibt, die die Komponente neben dem Bildschirm oder der Gerätebreite beeinflussen, die wir verwenden. Vielleicht möchten wir, dass diese Komponente zu einer anderen Komponente passt. Oder wir möchten einen Hilfstext zum Vergleich mit ihm ausrichten.

In beiden Fällen ist es eigentlich nicht möglich, aus der Perspektive des Verhaltens zu denken, anstatt die Bildschirmgröße, bevor er eine Containerabfrage besitzt, wie Chris schrieb:

Containerabfragen sind immer die oberste Liste der in CSS erforderlichen Verbesserungen. Die allgemeine Ansicht ist, dass wir, wenn wir Containerfragen haben, nicht viele globale Medienabfragen basierend auf der Seitengröße schreiben werden. Dies liegt daran, dass wir tatsächlich versuchen, einen lokalen Container zu kontrollieren, und der einzige Grund, warum wir dafür Medienabfragen verwenden, ist, dass es das beste Werkzeug ist, das wir in CSS haben. Ich glaube total daran.

Das obige ist der detaillierte Inhalt vonDenken in Verhaltensweisen, keine Bildschirmgrößen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!