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!