Die meisten Leute, die irgendwie am Layout von Sites beteiligt sind, gehen durch ... Nennen wir es den "Bootstrap-Pfad". Dies ist eine solche philosophische Position, wenn Sie 12 Spalten und nichts mehr haben. Sie nehmen die Elemente, setzen sie in bestimmte Spalten und alles ist gut mit Ihnen. Sie können das Gehirn ausschalten, in das Nirvana eintauchen und die Hände selbst ordnen die Elemente. Schönheit ... Aber dann taucht ein moderner Designer auf, der etwas zeichnet, das mit diesem wunderbaren Konzept überhaupt nicht einverstanden ist. Die Säulen sind deutlich größer, sie sind alle unterschiedlich breit und es muss sogar etwas in der Höhe ausgerichtet werden. Horror. Und das passiert häufiger, besonders wenn Sie sich von Geschäften oder Verwaltungsbereichen entfernen. Heute werden wir darüber sprechen, welche Art von Wunder es dort verwendet und wie es in modernem CSS vorbereitet werden kann. Es wird sehr wenig Code geben, hauptsächlich Reflexionen und Bilder.
Traditionelle Künstler haben eine sehr coole Sache - eine Art Raster aus Diagonalen und senkrechten Linien, die nicht nur dazu beiträgt, Standardkompositionen zu erstellen, sondern es Ihnen auch ermöglicht, das Bild manuell zwischen Leinwänden mit unterschiedlichen Proportionen zu übertragen, während dieselben Kompositionen beibehalten werden. Ich weiß nicht, wer und wann es erfunden wurde, aber die Erfindung ist eindeutig nicht neu. Wenn Sie lange genug in Hochglanzmagazinen blättern, werden Sie feststellen, dass es bestimmte Muster gibt, die nicht von der Größe der Elemente abhängen und deren Seiten- oder Blockanteil für den Inhalt unterschiedlich ist. Dort scheint es mit dem Begriff „typografische modulare Gitter“ verbunden zu sein. Im Allgemeinen war es seit der Antike in Mode, sich mit Typografie über Proportionen, Kompositionen und Proportionen zu beschäftigen. Viele bekannte Typografen und Architekten hatten einst ihre eigenen Regeln aufgestellt, wie man ein Rechteck ohne Lineal mit Teilungen teilt. Einige von ihnen waren an die Proportionen des Papiers gebunden, aber einige erlaubten Ihnen, mit irgendwelchen Rechtecken zu arbeiten. Und so kam dieser Ansatz mit Abstoßung von der Komposition, unabhängig von den Proportionen des Informationsträgers, langsam, aber sicher zu uns im Web und verdrängte die Abstoßung von den Sprechern, zumindest im Zusammenhang mit Werbung und „Wow“ -Seiten. Eigentlich handelt es sich um ein in engen Kreisen weit verbreitetes Raster, das in den letzten Jahren oft als "goldenes Kanonraster" bezeichnet wurde. Früher wurde es, wie ich es verstehe, einfach ohne einen bestimmten Namen verwendet.
Goldenes Kanongitter
Wenn man die Wörter „golden“, „canon“ und „design“ hört, erinnert man sich normalerweise an verschiedene verwirrte geometrische Konstruktionen, so etwas wie:
Dieses einfache Diagramm zeigt, welche Aktionen im Allgemeinen ausgeführt werden müssen, um dieses mysteriöse Gitter aufzubauen, das in diesem Artikel behandelt wird. Künstler und Fotografen hören normalerweise bei Schritt 2 auf, Designer gehen ein wenig weiter und wir brauchen das Ergebnis des allerletzten Schritts, bei dem alle Diagonalen bereits gelöscht sind und nur die vertikalen und horizontalen Linien verbleiben, da wir im Browser alle aus Rechtecken bestehen und eindenken Rechtecke und im Allgemeinen haben wir eine rechteckige Welt:
Es ist zu erkennen, dass das Gitter aus unterschiedlichen Zellgrößen besteht. Sie sind alle verschieden! Und davon gibt es viele! Aaaaaaaaaa !!!
Jeder Make-up-Coder muss jetzt weglaufen:
Tatsächlich wird alles klarer, wenn Sie ein Blatt Papier nehmen und zeichnen. Wenn Sie ein Blatt Papier in 4 gleiche Teile teilen und dann alle möglichen Diagonalen zeichnen, werden die Schnittpunkte der Diagonalen untereinander und mit horizontalen oder vertikalen Linien gebildet. Wenn wir mehr horizontale oder vertikale Linien durch diese Punkte ziehen und dann mehr Diagonalen bilden, erhalten wir mehr Schnittpunkte usw. So können Sie endlos weitermachen.
Wenn Sie sich noch an die Schulgeometrie erinnern, haben Sie wahrscheinlich bereits erraten, dass die Aufgabe, ein Segment mit Hilfe eines Kompasses und eines Lineals in gleiche Teile zu unterteilen, klugerweise verborgen war. Und so ist es auch. Letztendlich erhalten wir Linien, die vom Blatt 1/2, 1/3, 1/4, 1/6, 1/8 usw. abgeschnitten werden. Tatsächlich müssen Sie in der modernen Welt nicht einmal irgendetwas bauen - der Computer selbst kann alles teilen, aber aus Gründen des Horizonts ist es nützlich zu wissen, wie er auf die großväterliche Art gebaut ist.
Ich weiß nicht, ob es in der Kunstwelt Namen für die Elemente dieses Rasters gibt, aber wir werden die Begriffe "Zeilen", "Spalten" und "Blöcke" oder "Zellen" verwenden, da sie der CSS-Welt am nächsten kommen. Die größte Anzahl von Zeilen und Spalten in einem solchen Raster, die ich getroffen habe - 20, wie im Bild oben. Manchmal passiert es weniger, wenn beim Aufbau des Gitters weniger Schritte unternommen wurden. Ich denke, dass es keinen Sinn macht, mehr als 20 zu machen, weil Der Unterschied in der Schriftgröße auf verschiedenen Bildschirmen beseitigt fast den Unterschied zwischen kleineren Blöcken mit mehr Zeilen und Spalten.
Wenn Sie ein solches 20-Zeilen- und 20-Spalten-Raster nehmen und ein wenig malen, werden Sie sehen, dass dort wirklich die Linien alles in gleiche Teile teilen. Die ganze Schwierigkeit der Wahrnehmung liegt in der Tatsache, dass gerade und ungerade Brüche hier in einem Schema gemischt werden.
Bei der Entwicklung von Standardgeschäften, Zielseiten usw. ein solches Gitter wird nicht benötigt. Es wird nur alles aus heiterem Himmel erschweren, und der Benutzer wird den Unterschied immer noch nicht bemerken. Aber ich glaube, dass jeder Front-Endner mindestens einmal ein darauf aufgebautes Design in einer entspannten Atmosphäre drehen sollte, um seinen Verstand ein wenig zu klären und nicht in Panik zu geraten, wenn Sie sich in Zukunft noch so etwas stellen müssen.
Viel Platz, wenig Inhalt
Ein solches Raster eignet sich besonders für Websites, an denen nicht viel Inhalt vorhanden ist, die sich nicht ändern und bei denen die Präsentation und der Eindruck beim Besucher im Vordergrund stehen. Wenn ich mir solche Websites anschaue, kann ich nicht die gleichen Modemagazine aus dem Kopf bekommen, und es erscheint mir angebracht, ein solches Layout als "Magazinsatz" zu bezeichnen. Das Durchsuchen solcher Websites sieht wirklich so aus, als würde man durch Zeitschriften blättern, insbesondere beim Blättern durch Seiten. Gleichzeitig können Sie sehen, dass sie fast immer in ihrer ganzen Pracht nur für den Desktop, für horizontale Bildschirme, entworfen wurden, wo sie einer Doppelseite sehr ähnlich sind. Nehmen wir zum Beispiel diese beiden Konzepte:
Wir werden sie als Beispiele für die Verwendung unseres Rasters verwenden. Aber zuerst ein paar Worte zu Proportionen und negativem Raum. Wenn Sie nicht wissen, was es ist, empfehle ich dringend, das Buch „ Design für Nicht-Designer “ zu lesen.
Auf solchen Websites gibt es normalerweise drei Arten von Elementen: Text, Bilder oder Videos und dekorative Formen. Anfänger und manchmal auch nicht sehr Anfänger, Layouter nehmen das Layout und beginnen damit, die Abmessungen in Pixel auf die Stirn zu kopieren. Einschließlich Polsterung. Und Schriftgrößen. Wenn Sie also die Proportionen des Browserfensters ändern, „verschiebt“ sich alles und sieht nicht mehr so gut aus. Dies liegt an der Tatsache, dass die Eigenschaften der Elemente in Bezug auf die Schriftgröße in ihnen (einschließlich der ungefähren Anzahl von Buchstaben oder Wörtern in Zeilen, Krümmungsradien usw.) zusammenbrechen und das negative Leerzeichen neu verteilt wird. Und wenn sich das Problem der Schriftarten mithilfe von CSS-Gateways , adaptiver Typografie und dem Festlegen der Größe von allem in REM / EM (wie zum Beispiel im selben Smashing Magazine) noch lösen lässt, dann sind bei negativem Speicherplatz ernstere Maßnahmen erforderlich. Und unser seltsames Gitter kommt zur Rettung.
Magische Prozent gegen das System
Wenn Sie das Layout solcher Seiten auf die alte Art und Weise erstellen, indem Sie sie absolut positionieren, ohne an das Raster gebunden zu sein, wird diese Lektion zu einem endlosen Kopieren einer Vielzahl von Zahlen, die Prozentsätze oder Pixel für die oberen, linken, rechten und unteren Eigenschaften in CSS angeben. Es wird nur ein Berg magischer Zahlen sein, in denen es unmöglich ist zu navigieren, was absolut unmöglich ist, "mit dem Auge" zu überprüfen, ganz zu schweigen von irgendeiner Art von System. Und ich möchte, wie bei den Bootstrap-Spalten, alles in einfachen und verständlichen Zahlen ausdrücken. Hier gibt es neben der Bequemlichkeit immer noch die Frage nach Konstanz, Konsistenz oder, wie es in der Mode ist, Konsistenz. In unserem Kontext ist es sehr schwierig, die Konsistenz aufrechtzuerhalten, wenn die Menge der Größen und Positionen der Elemente nicht begrenzt ist, und alles auf den Seiten beginnt in verschiedene Richtungen zu „tanzen“. Dies ist eine ewige Krankheit von Websites, bei denen kein Styleguide direkt in den Code und in die Köpfe der Entwickler eingebettet ist.
Stellen Sie sich vor, dass das Navigationselement um 90 Grad gedreht ist und an der oberen (jetzt linken) Kante des Rasters auf der rechten Seite der Seite ausgerichtet ist. Die Höhe (jetzt Breite) ist jedoch geringer als die Breite der Rasterzellen, in denen es sich befindet Personen, die das Raster nicht kennen, messen aus Gewohnheit den Abstand vom unteren (jetzt rechten) Rand zur rechten Seite des Browserfensters als den kleinsten, aber dieser Abstand hat nicht mehr den geringsten Bezug zum Raster. Dies ist der Abstand vom rechten Bildschirmrand zur Rasterführungslinie abzüglich der Größe des bedingten Texts mit einer bestimmten Zeilenhöhe in diesem bestimmten Element. Und es gibt Dutzende solcher Elemente auf der Seite. Und ihre Positionen in CSS haben nichts mit dem Raster zu tun, obwohl sie theoretisch darauf ausgerichtet sind. Hier müsste ein Bild aus den ersten Black Ops eingefügt werden, auf dem der Held die Zahlen sieht. Viele Zahlen.
Aber was ist, wenn ich Ihnen sage, dass das alles ein System ist? Lassen Sie uns unser 20x20 “gebogenes” Gitter auf die obigen Seiten legen und einen Blick darauf werfen.
Wow. Alle Elemente sind genau auf dem Raster angeordnet. Die einzige Frage ist, in welche Richtung der Text in ihnen ausgerichtet ist - links, rechts, oben oder unten, aber die Position der Blöcke selbst ist eindeutig nicht zufällig. Sehen wir uns ein zweites Beispiel an:
Und wieder ist nicht alles zufällig lokalisiert. Das einzige Element, das leicht ausgeschlagen ist, ist der Text in der Mitte. Aber nach dem Betrachten wird klar, dass er leicht nach rechts verschoben ist (durch Pfeile dargestellt), aber wenn die Transformation entfernt wird, wird er auch genau an seinen Platz fallen, den ich in Pink eingekreist habe.
Egal wie seltsam das Raster auf den ersten Blick erscheint, es führt das System in den Entwurf ein, und es wäre logisch, dieses System im Code zu speichern. Indem wir alles streng in einem Raster anordnen und CSS-Transformationen nach Bedarf verwenden, machen wir den Code verständlicher und leichter zu pflegen.
Möglicherweise haben Sie Websites mit dieser Art von Design und vielen Animationen gesehen (auch wenn es kein WebGL und keine komplexen Übergänge zwischen den Seiten gibt, ist wow.js fast immer vorhanden). Dort ist also alles auf dem Raster genau gleich aufgebaut, und die gesamte Darstellung der Elemente erfolgt mithilfe von CSS-Transformationen, wenn das Element im Voraus durch Transformation aus dem Raster entfernt und dann in seinen ursprünglichen Zustand animiert wird.
Es ist wichtig, die dünne Raute um das Mädchen zu beachten. Man könnte denken, dass er das System von links verlassen hat, aber das ist nur auf den ersten Blick. Tatsächlich ist er nicht an sie gebunden, sondern an das Bild, und er ist nur wegen der Ungleichmäßigkeit des Gitters „ausgeflogen“.
Die Logik des Verhaltens ist wichtiger als bestimmte Zahlen
Am Beispiel dieses auf den ersten Blick nicht wahrnehmbaren Details zeigt sich ein sehr wichtiges, fast wichtigstes Prinzip, solche Entwürfe für den Desktop zu setzen: Die Logik des Verhaltens von Elementen steht immer an erster Stelle. Womit ist er verbunden? Relativ zu was ist ausgerichtet? In welcher Beziehung steht das gesamte Seitendesign zum Status dieses bestimmten Elements? Was passiert damit, wenn die Fenster- oder Inhaltsgröße geringfügig geändert wird? Diese Fragen machen aus einem einfachen Layout ein gutes Layout, das auf jedem Bildschirm gut aussieht.
Kopieren Sie Pixelmaße nicht einfach so, studieren Sie verschiedene Positionierungsoptionen in CSS und achten Sie immer auf den Kontext. Dies kann die Code-Unterstützung erheblich vereinfachen und die Anpassungsfähigkeit verbessern.
Lernen, bis 20 zu zählen
Bevor ich zum praktischen Teil übergehe und Code schreibe, möchte ich ein paar Worte über das Zählen von Blöcken in einem solchen Raster sagen. Es kann gleichzeitig sowohl im Layout als auch auf der Seite angezeigt werden (über ein Hintergrundbild von 100% bis 100% Größe für einen Container mit einem Raster), aber Sie müssen noch zählen.
Persönlich erscheint es bei diesem Ansatz zweckmäßig, das Raster in 5x5-Blöcke zu unterteilen und darin zu navigieren:
Das Zählen von 1, 5/6, 10/11, 15/16, 20, das Addieren oder Subtrahieren von Zahlen von 1 bis 5 ist nicht so schwierig. Das Einzige, was ein wenig verwirrend sein kann, ist das Subtrahieren (zuerst irrt sich jeder in die eine oder andere Richtung). aber es geht schnell vorbei. Natürlich fragst du, warum nicht mit 0 zählen, wie normale Leute? Tatsache ist jedoch, dass in CSS Grid die Anzahl von 1 abweicht.
CSS-Gitter - goldene Kugel
Erinnern Sie sich an diese Herausforderung, wenn etwas in 30 Codezeilen erledigt wird? Eine solche Seite kann also aus 30 Zeilen bestehen, und der Code ist vollständig verständlich. Glaubst du nicht? Na mal sehen.
Modernes CSS bietet uns die großartige Möglichkeit, solche Grid- Grids zu erstellen . Sie sind wie gemacht für diese Aufgabe. Mit den Eigenschaften grid-template-columns und grid-template-rows können Sie die Beziehungen zwischen den Größen unserer Blöcke festlegen. Sie müssen sie nur zählen.
Mit einem Taschenrechner ausgestattet ist dies nicht schwierig. Und wenn es bereits ein gezeichnetes Raster mit Hilfslinien gibt, wird dies zu einer rein mechanischen Aufgabe. Wenn wir die erste Zelle in einer Zeile oder Spalte als 1 nehmen, erhalten wir eine Folge von Größen 1, 1, 2, 4, 2,66, 5,33 usw. Dies sind die Zellengrößen im Verhältnis zur ersten bei einem Raster mit 20 Zeilen oder Spalten und diesen Hilfslinien, wie in unseren Beispielen. Wenn in Ihrem Projekt eine andere Anzahl von Zellen im Raster vorhanden ist, müssen Sie alles selbst neu berechnen. Wir setzen sie in die oben genannten Eigenschaften ein:
.golden-grid { grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; }
Nicht so schwer. Normalerweise müssen Sie das Raster auf Vollbild strecken und seine Position festlegen. Sie können ein Bild mit einem Raster im Hintergrund anzeigen, um sich davon zu überzeugen:
.golden-grid { display: grid; position: relative; height: 100vh; width: 100%; grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; background: url('grid.jpg') left top / 100% 100% no-repeat; }
Auf diesem Raster kann als erledigt angesehen werden.
Schriftsatz
Wir kehren zu den Bildern zurück, in denen die Position der Blöcke auf den Layouts notiert wurde, und beginnen mit dem Satz. Wir messen nichts, keine Pixel, nur die Zellenzahlen in der Tabelle. Beginnen wir mit dem lila Konzept.
<div class='golden-grid'> ... </div>
Wir sehen uns die Position des Fotos mit dem Mädchen an - es beginnt am linken Rand, nimmt die Hälfte vertikal und etwas mehr als die Hälfte horizontal ein. Im Kontext des Rasters beginnt es bei Zelle [11, 1] und erstreckt sich 10 nach unten und 12 nach rechts. Wenn Sie ein wenig üben, ist es tatsächlich möglich, diese Zahlen mit großer Genauigkeit zu erraten, ohne die Zelle zu zählen.
<div class='golden-grid'> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> </div>
Wir gehen weiter - das linke Hintergrundbild. Es nimmt alle 20 Zellen in der Höhe und sechs in der Länge ein. Fängt das mit dem siebten an? Der Augenmesser kann täuschen, wir prüfen - alles stimmt.
<div class='golden-grid'> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> <div style='grid-area: 1 / 7 / span 20 / span 6;'></div> </div>
So gehen wir alle Objekte auf der Seite durch:
<div class='golden-grid'> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> <div style='grid-area: 1 / 7 / span 20 / span 6;'></div> <div style='grid-area: 14 / 15 / span 7 / span 6;'></div> <div style='grid-area: 1 / 9 / span 13 / span 12;'></div> <div style='grid-area: 3 / 17 / span 1 / span 1;'></div> <div style='grid-area: 3 / 10 / span 1 / span 2;'></div> <div style='grid-area: 14 / 11 / span 1 / span 2;'></div> <div style='grid-area: 15 / 11 / span 3 / span 6;'></div> <div style='grid-area: 7 / 16 / span 4 / span 1;'></div> <div style='grid-area: 7 / 17 / span 1 / span 1;'></div> </div>
Ich schreibe speziell Inline-Stile, damit sie so kompakt wie möglich sind und Sie die gesamte Seite mit einem Blick abdecken können. In der Praxis ist es natürlich sinnvoll, dies in CSS-Klassen einzuteilen, damit es zumindest einfacher ist, Medienausdrücke zu schreiben.
Die Anordnung der Blöcke auf der ersten Seite ist fertig. Wir gehen zum zweiten über und verfahren auf ähnliche Weise:
<div class='golden-grid'> <div style='grid-area: 1 / 11 / span 20 / span 10;'></div> <div style='grid-area: 4 / 13 / span 14 / span 4;'></div> <div style='grid-area: 3 / 3 / span 1 / span 2;'></div> <div style='grid-area: 3 / 17 / span 1 / span 2;'></div> <div style='grid-area: 7 / 4 / span 1 / span 4;'></div> <div style='grid-area: 11 / 3 / span 5 / span 1;'></div> <div style='grid-area: 17 / 4 / span 1 / span 4;'></div> <div style='grid-area: 12 / 8 / span 6 / span 3; transform: translateX(10%);'></div> <div style='grid-area: 3 / 10 / span 1 / span 2;'></div> <div style='grid-area: 8 / 18 / span 6 / span 1;'></div> </div>
Für den Text wurde eine Transformation hinzugefügt, damit er im Raster bleibt. Schauen wir uns das Ergebnis an (oben im Bild sind Screenshots der erfundenen Positionen von Elementen mit einem darunter eingebetteten Raster):
Sie müssen nur noch die Farben der Elemente festlegen, Bilder einfügen, Texte schreiben und Rotationen von 90 Grad (durch Drehen der CSS-Transformation) sowie Links-Rechts- und Auf-Ab-Ausrichtung für sie hinzufügen. Aber das sind alles Kleinigkeiten - Hauptsache, die problematischste Positionierungsaufgabe wurde schnell und einfach gelöst.
Sandkasten für Experimente .
Und was ist mit Anpassungsfähigkeit?
Die Praxis zeigt, dass solche Websites für horizontale Bildschirme konzipiert sind und das Raster Ihnen ermöglicht, ein schönes Erscheinungsbild in verschiedenen Proportionen beizubehalten - fullhd, gedrehtes iPad, gedrehtes Nexus 7 - es wird überall gut sein. Es gibt zwei Hauptsituationen, in denen etwas geändert werden muss:
- Die Höhe des Ansichtsfensters ist zu klein (sehr breit, aber niedrig - dies passiert, wenn Sie die Fenstergröße manuell ändern oder wenn die Tastatur auf dem Tablet angezeigt wird).
- Ein hohes, aber schmales Ansichtsfenster, wenn die „zwei Seiten“ nicht in die Breite passen und sich verformen (Telefone, Tablets in vertikaler Ausrichtung).
Die erste Frage wird normalerweise gelöst, indem Sie die Mindesthöhe für Abschnitte festlegen, die in einem solchen Raster erstellt wurden, und den Bildlauf Seite für Seite deaktivieren, falls einer vorhanden ist. So bleibt das Erscheinungsbild erhalten und die interaktiven Elemente bleiben zugänglich - Sie können zu ihnen blättern.
Die vertikale mobile Version wird hauptsächlich für den Konsum von Inhalten benötigt. Dort kann man sich nicht umdrehen und der Schönheit und des Eindrucks halber riesige Einkerbungen machen. Normalerweise ist der Bildlauf deaktiviert, das Raster wird in den Hintergrund gerückt (sofern alle Elemente angezeigt werden: Block) und es bleibt nur der vertikale Rhythmus übrig, der sich mehr aus dem Einzug ergibt, der mit der Schriftgröße zusammenhängt. Obwohl es manchmal Ausnahmen gibt, wenn ein Designer es schafft, alles schön auf kleinen Bildschirmen anzuordnen. In diesem Fall ändern wir einfach die Rastereigenschaft in eine neue und richten den Text in der richtigen Richtung aus.
Ein wichtiger Punkt sind die Haltepunkte, an denen alles neu aufgebaut wird. Es gibt Unterstützer, die sie an die Größen gängiger Geräte binden, aber es gibt regelmäßig Situationen, in denen nach dem Hinzufügen solcher Punkte nicht alles sehr gut funktioniert - entweder bei der mobilen Version wäre es möglich, mehr zu passen, oder in der Mitte des Tablets sollte etwas entfernt oder neu angeordnet werden und. etc. Alles beruht auf dem Originaldesign für einen großen Bildschirm. So oft kommt der Anpassungsprozess zu dem Konzept von Content-First oder Variationen zu diesem Thema, wenn der Inhalt als Grundlage genommen wird und Punkte basierend auf Überlegungen zu Design, Komfort und nicht den Bildschirmgrößen gängiger Geräte ausgewählt werden. Das heißt, der Inhalt ist primär, es ist wichtig, dass er bequem in seiner beabsichtigten Form konsumiert werden kann, und die Versionen für Mobilgeräte, Tablets und Desktops sind bereits sekundär. Dies sind nur Namen für Werkzeuge, aber nicht die Basis. Ja, dies kann dazu führen, dass es mehr Haltepunkte als üblich gibt, 2-3, es können 5 oder sogar 7 sein, aber dieser Ansatz ermöglicht es Ihnen, ein Layout zu erstellen, das auf allen Bildschirmgrößen innerhalb der angegebenen Grenzen schön aussieht.
Um es zusammenzufassen
Ich verstehe, dass nicht jeder und nicht jeder Tag mit solchen Seiten arbeiten muss, aber solche Raster sind auf verschiedenen nicht standardmäßigen Websites weit verbreitet. Zumindest ist es nützlich, sie zu kennen, damit Sie bei einer Kollision mit einem solchen Layout nicht in Panik geraten und nicht viel Zeit darauf verwenden Das Messen unnötiger Größen in Pixeln oder Prozent und das Berechnen der Zellgrößenverhältnisse und die Verwendung von modernem CSS machen die Unterstützung älterer Browser in solchen Projekten zu einer Seltenheit.