Haben Sie eine Situation erlebt, in der Text und Blöcke, die aus irgendeinem Grund perfekt in das Layout von Photoshop passen, nicht hartnäckig im Layout gehorchen möchten - nicht in die vom Layout angegebene Breite passen? Gleichzeitig verwenden sowohl der Designer als auch der Layout-Designer dasselbe Raster, z. B. das Bootstrap 3-Raster.
Nachdem ich eine beträchtliche Anzahl von Websites überprüft hatte, kam ich zu dem Schluss, dass sich inmitten von Designern und Layoutern ein häufiger Fehler eingeschlichen hat.
Das Bootstrap-Raster richtet als allgemeines Rasterbeispiel ein 12-Spalten-Layout ein, das auf Bildschirmen mit einer Breite von 1200 Pixel oder mehr Abmessungen zwischen 30-Pixel-Spalten und 15-Pixel-Seitenrändern des Inhalts links und rechts aufweist. Wenn man bedenkt, dass die Breite der Spalten vom Designer in Pixel und der Layout-Designer in Prozent festgelegt wird, ist der unten beschriebene Fehler nicht sofort erkennbar.
Wie arbeitet ein Designer mit einem Raster? Normalerweise wird dieses Raster von einem Dienst generiert, heruntergeladen und in Photoshop installiert. Wie arbeitet der Layoutdesigner mit dem Raster? Das Netz stammt aus dem Bootstrap 3-Framework.
Was ist dann das Problem, wenn die Abmessungen des Rasters (Spalten und Intervalle) gleich sind?
Die Essenz des Problems liegt in der praktischen CSS-Eigenschaft "Box-Sizing" mit dem Wert "Border-Box", der standardmäßig im Bootstrap festgelegt ist. Aus diesem Grund berücksichtigt der Designer die Breite der Seitenränder zusätzlich zur Breite des Inhalts (1170 Pixel plus Seitenränder von 15 Pixel rechts und links), und der Layout-Designer selbst nimmt sie, ohne es zu wissen, in die Breite des Inhalts ein (1170 Pixel, einschließlich Seitenränder von 15 Pixel, d. H. Die Breite des Inhalts beträgt 1140px). Somit stellt sich heraus, dass im Projekt in verschiedenen Phasen zwei verschiedene Gitter verwendet werden und der Layout-Designer ein engeres hat.
Dieser Fehler tritt auch auf, wenn andere Raster als Bootstrap verwendet werden. Anscheinend wurde es mit dem Aufkommen der "Border-Box" geboren.
Die Lösung ist einfach: Passen Sie die Größe des Containers an: "container {width: 1200px;}" (1170px - Inhalt plus 15px Einrückungen rechts und links). Es ist auch notwendig, die entsprechende Einstellung des Behälters um den Seitenabstand für Bildschirme mit anderen Auflösungen vorzunehmen.
Es scheint mir, dass es keinen Sinn macht, darüber zu streiten, wer für die Behebung des Fehlers verantwortlich ist. Es ist eine gute Form für den Designer, diese Frage mit dem Layout-Designer zu klären, und der Layout-Designer sollte sich an diese Funktion erinnern, bei der das „Rahmenfeld“ für das Raster verwendet wird. Fehlerbehebungen in einem weit verbreiteten Framework erhöhen auch die Anzahl der Websites, die genau dem Design entsprechen.