Nils Binder spricht über eine Technik zur Abstandsgestaltung zwischen zwei Elementen. Stellen Sie sich eine Kopfzeile auf einem großen Bildschirm mit einem Logo in der oberen linken Ecke und einer Navigation in der oberen rechten Ecke vor. Auf einem kleinen Bildschirm, wenn sie nicht mehr auf derselben „Zeile“ sein können und umbrechen müssen, brechen sie nicht einfach um, sondern werden zentriert.
Ein Video erklärt es besser
Mein Gedanke ist: Ich würde einfach den genauen Pixelwert für den Breakpoint finden, an dem dies passieren soll, und dann eine Media Query schreiben, die die Dinge neu gestaltet, um das zu erreichen.
Aber… Media Queries sind nur für die gesamte Breite des Browserfensters gedacht. Das funktioniert in diesem Fall wahrscheinlich, da es sich um eine vollständige Website handelt, aber ich verstehe den Wunsch, keine Media Queries schreiben zu müssen. Nils‘ Idee greift Konzepte von Heydons Holy Albatross auf, um dies ohne jegliche Media Queries zu ermöglichen. Sie könnten dies also auf einer kleineren Komponente verwenden, bei der Sie den Umbruchpunkt bei einer bestimmten Größe anpassen müssen, die nichts mit der Größe des Browserfensters zu tun hat.
Ich habe diese Technik kürzlich angewendet. Die Dokumentation ist wirklich gut, sodass ich keine Probleme bei der Implementierung hatte. Sie sollten es ausprobieren, wenn Sie auf eine solche Designidee stoßen.
Das ist (fast genau) etwas, das ich für ein Projekt, an dem ich arbeite, lösen wollte! Der einzige Punkt, den es für mich nicht erfüllt, ist, dass ich keine magischen Zahlen für die Größenordnung haben möchte, bei der der Umbruch stattfindet. Aber für meinen Build, der fast vollständig statisch ist, konnte ich das lösen, indem ich
chin die Berechnung einbezog, basierend auf dem Navigationsinhalt. Grundsätzlich N Zeichen plus N Navigations-Padding-Elemente plus bekannte Logo-Breite plus Lücke. Es ist viel zu berechnen und ich mache mir Sorgen, dass all das in einer Berechnung die Leistung beeinträchtigen wird, daher untersuche ich die Vereinheitlichung auf ch-Einheiten, um so viel wie möglich zur Build-Zeit zu erledigen. Aber es funktioniert!Ja, die Sache mit der „magischen Zahl“ für den Schwellenwert macht mich auch skeptisch. Ich schätze, man könnte dies nur bei statischen, sich nie ändernden Inhalten verwenden.
Aber die Idee, wann immer möglich ohne Media Queries zu arbeiten, gefällt mir wirklich gut!