✅ So erstellen Sie ein responsives Layout

Inhaltsverzeichnis

Anforderungen
Die Eigenschaften minwidth und maxwidth
Verwendung der Relative Polsterung

EIN responsives Layout im Webdesign zur Norm geworden ist, bedeutet diese Art des Seitenlayouts, dass unsere Elemente in der Lage sein müssen, sich neu anzuordnen, wenn sich das Fenster, das es enthält, abrupt ändert, d. h. von sehr groß zu sehr klein und umgekehrt anständige und funktionale Benutzererfahrung.

Dies war immer verfügbar mit den Regeln von CSSBei der letzten Umsetzung wurden jedoch bessere Maßnahmen ergriffen, zum Teil aufgrund der bereits vorhandenen modernen mobilen Welt, die einer der großen Verbraucher von Design ist reaktionsschnell.

Obwohl es mehrere Frameworks gibt, wie z Bootstrap oder Stiftung die uns standardmäßig ein ansprechendes Layout geben, können wir uns nicht immer auf sie verlassen, deshalb ist es sehr nützlich zu wissen, wie wir ein Layout mit diesen Eigenschaften mit eigenen Mitteln erstellen können.

Anforderungen

1- Um dieses Tutorial abzuschließen, benötigen wir Grundkenntnisse über HTML Ja CSS, da sie für das Verständnis der im Tutorial gemachten Beispiele wichtig sind.

2- Auf der technischen Seite benötigen wir mindestens einen modernen Browser wie Google Chrome, einen Texteditor zum Schreiben unseres Codes, den wir verwenden können Erhabener Text o NotePad ++ oder sogar der Windows-Notizblock oder Gedit unter Linux, wenn wir abenteuerlustig sind.

3- Schließlich benötigen wir eine Internetverbindung, um ein oder zwei Bilder herunterzuladen, wenn wir sie in unseren Code einfügen möchten, wie wir in einem der gezeigten Beispiele sehen werden.

Die Eigenschaften minwidth und maxwidth

Dies ist vielleicht der erste Aspekt, auf den wir bei der Arbeit mit Umgebungen stoßen reaktionsschnell, da wir uns oft darauf konzentrieren, wann die Seite kleiner wird, aber was ist mit den neuen Bildschirmen von 4K? Deshalb dürfen wir die maximale Auflösung nicht vernachlässigen, unter der unsere Website anständig aussieht.

minwidth und maxwidthDie Eigenschaften oder Attribute Mindestbreite Ja maximale Breite CSS hilft uns, dieses Problem zu bekämpfen, da sie es uns ermöglichen, die maximalen Margen festzulegen, unter denen unser Design sein soll reaktionsschnell, denn wenn nicht, können uns die Extreme in den Größen gerade in diesen Momenten, in denen die Auflösungen zwar weiter zunehmen, aber noch nicht massiv werden, einen Streich spielen.

Im folgenden Beispiel zeigen wir Ihnen, wie wir unsere Layout Dank der genannten Eigenschaften werden wir dafür ein Dokument erstellen HTML mit folgendem Inhalt:

Responsive Layout-Beispiel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet Ultricies bei Quis-Schmerzen. Aliquam ac nisl fahrzeug.

Wir haben drei div-Elemente erstellt, die als eine Art Spalten funktionieren, also sagen wir in diesem Fall zu seinem Container-Element Artikel dass seine maximale Breite 1200 pxEgal wie groß der Bildschirm ist, das Design wird von dort aus nie mehr wachsen, dann erstellen wir drei Klassen, eine für jedes Div und eine, die wir auf diese Weise einer Mindestbreite zuweisen, egal wie stark der Bildschirm verkleinert wird, es geht immer. um dieses Minimum an Proportionen beizubehalten, ist dies hervorragend für Bilder, wie wir im Screenshot des Beispiels sehen werden, und schließlich zur Klasse schweben wir weisen ihm auch eine Mindestbreite zu. Sehen wir uns an, wie unser Beispiel im Browser aussieht, wenn wir eine große Auflösung haben:

VERGRÖSSERN

Sehen wir uns nun an, wie es skaliert, wenn wir das Browserfenster etwas verkleinern:

VERGRÖSSERN

Lassen Sie uns schließlich das Ergebnis sehen, wenn wir das Fenster auf eine Größe ähnlich der eines Handys setzen:

Wir konnten sehen, wie die als Minimum und Maximum festgelegten Proportionen eingehalten wurden, aber das Wichtigste ist, dass unser Design an die unterschiedlichen Auflösungen angepasst wurde, mit denen wir es visualisiert haben, und konnten so sicherstellen, dass der Benutzer nicht verliert Benutzerfreundlichkeit in ihrer Erfahrung mit unserer Website.

Das ist natürlich noch lange nicht etwas, das man in der Produktion zeigen kann, aber es gibt uns eine Vorstellung davon, wo wir einige der Bemühungen konzentrieren sollten, wenn wir an echten Designs für unsere Anwendungen und Seiten arbeiten, das Interessante ist das Die Spalten wurden so angepasst, dass wir sehen konnten, wie wir von einem 3-Spalten-Layout zu einem einspaltigen Layout übergegangen sind.

Verwendung der Relative Polsterung

Das Polsterung Es ist eine Maßnahme, die es uns ermöglicht, einen Abstand des Inhalts zu den Rändern des Behälters aufrechtzuerhalten, damit wir eine Grenze dafür festlegen, wie weit er gehen wird. Er sollte nicht mit dem Rand verwechselt werden, da dies ein anderes Konzept ist.

Der Punkt ist, dass die Polsterung wird bei der Erstellung fast nie berücksichtigt Layout sein reaktionsschnell was zu Texten und Inhalten führt, die später beim Ändern der Auflösung, mit der das Design betrachtet wird, nicht ästhetisch bleiben.

Im folgenden Code setzen wir a Polsterung was relativ funktioniert, das heißt, da die Größe des Fensters angepasst wird, unsere Polsterung Es wird sich ändern, um die Proportionen beizubehalten und so den Inhalt immer so zu halten, wie wir ihn angeordnet haben, obwohl er aufgrund der geänderten Auflösung weniger Platz hat. Sehen wir uns unser Codebeispiel an:

Relative PolsterungBehalten Sie die Proportionen mit einer relativen Polsterung bei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.

Wie wir sehen, definieren wir die Eigenschaften Polsterung jeder Klasse mit Prozentwerten anstelle von festen Werten mit Maßangaben in Pixeln. Auf diese Weise gibt der Stilinterpreter des Browsers eine Messung an, die dem von uns platzierten Wert am Ende entspricht, wenn wir unser Beispiel sehen im Browser bekommen wir folgendes:

VERGRÖSSERN

Wenn wir nun die Größe des Fensters reduzieren, sehen wir, wie eine Anpassung vorgenommen wird, wobei jedoch ein proportionaler Abstand vom Text zu den Rändern beibehalten wird:

Wir bemerken dann, wie unser Design beibehalten wird und Verformungen verhindert werden, indem die Auflösung der Person, die es enthält, reduziert wird, wodurch ein konsistentes Erlebnis für unseren Benutzer gewährleistet wird.

Obwohl es fortgeschrittenere Konzepte gibt, auf die wir in anderen Tutorials eingehen werden, können wir mit diesen ein paar Tricks oder Tipps es schaffen, unseren alten Websites neues Leben einzuhauchen, und jetzt viel mehr als Suchmaschinen wie Google Sie fragen uns nach einer mobilen Version, um uns Präferenzen in den Ergebnissen mitteilen zu können. Das Wichtigste, um großartige Ergebnisse zu erzielen, ist zu experimentieren und viel zu üben, damit diese Lösungen natürlich aus unserem Kopf kommen und nicht ständig auf Anleitungen zurückgreifen müssen.

Damit beenden wir dieses Tutorial, da wir sehen, dass wir kein Framework benötigen, um Ergebnisse zu erzielen reaktionsschnell, und wir müssen die Kombination auch nicht verlassen HTML + CSSDie einzige Sache ist, dass, wenn wir unsere eigenen Werkzeuge bauen müssen, die Zufriedenheit mit der Verbesserung unseres Designs jedoch eine große Belohnung ist.