Responsive Text - HTML Computer Code Elemente - Einstellen des Ansichtsfensters. Responsive Sites ändern ihr Layout nicht nur zwischen Haltepunkten, sondern sind auf flexiblen Rastern aufgebaut. Ein flexibles Raster bedeutet, dass Sie nicht auf jede mögliche Gerätegröße abzielen und ein pixelgenaues Layout für diese erstellen müssen. Ein solcher Ansatz wäre angesichts der großen Anzahl unterschiedlich großer Geräte und der Tatsache, dass zumindest auf dem Desktop nicht immer ein maximiertes Browserfenster verwendet wird, unmöglich.
In den Anfängen des responsiven Designs bestand unsere einzige Möglichkeit, ein Layout zu erstellen, in der Verwendung von Floats. Flexible Float-Layouts wurden erreicht, indem man jedem Element eine prozentuale Breite zuwies und sicherstellte, dass die Gesamtwerte im gesamten Layout nicht mehr als 100 % betrugen. In seinem ursprünglichen Artikel über flüssige Raster hat Marcotte eine Formel beschrieben, mit der man ein mit Pixeln entworfenes Layout in Prozentwerte umwandeln kann. Im CSS-Grid-Layout ermöglicht die Einheit fr die Verteilung des verfügbaren Platzes auf die Rasterspuren.
Im nächsten Beispiel wird ein Rastercontainer mit drei Spuren in der Größe 1fr erstellt. Dadurch werden drei Spaltenspuren erzeugt, die jeweils einen Teil des verfügbaren Platzes im Container einnehmen. Mehr über diesen Ansatz zur Erstellung eines Rasters erfahren Sie im Thema Layoutraster lernen unter Flexible Raster mit der Einheit fr. Responsive Images, die das Element und die Attribute srcset und sizes verwenden, lösen diese beiden Probleme.
Sie können mehrere Größen zusammen mit Hints (Metadaten, die die Bildschirmgröße und -auflösung beschreiben, für die das Bild am besten geeignet ist) bereitstellen, und der Browser wählt das am besten geeignete Bild für jedes Gerät aus, wodurch sichergestellt wird, dass ein Benutzer eine Bildgröße herunterlädt, die für das von ihm verwendete Gerät geeignet ist. Eine ausführliche Anleitung zu Responsive Images finden Sie in der Rubrik HTML lernen hier auf MDN. Ein Element des responsiven Designs, das in früheren Arbeiten nicht behandelt wurde, ist die Idee der responsiven Typografie. Im Wesentlichen geht es dabei um die Änderung der Schriftgröße innerhalb von Media-Queries, um eine geringere oder größere Bildschirmfläche zu berücksichtigen.
Dieses Meta-Tag gibt es, weil die meisten Websites nicht für mobile Geräte optimiert waren, als das erste iPhone auf den Markt kam und die Menschen begannen, Websites auf einem kleinen Handy-Bildschirm zu betrachten. Der mobile Browser setzte daher die Ansichtsbreite auf 960 Pixel, renderte die Seite in dieser Breite und zeigte das Ergebnis als vergrößerte Version des Desktop-Layouts an. Auf Google Android wurde das Gleiche getan. Die Benutzer konnten die Website zoomen und verschieben, um die Teile zu sehen, die sie interessierten, aber es sah schlecht aus.
Das sieht man auch heute noch, wenn man das Pech hat, auf eine Website zu stoßen, die kein responsives Design hat. Das Problem ist, dass Ihr responsives Design mit Breakpoints und Media-Queries auf mobilen Browsern nicht wie vorgesehen funktioniert. Wenn Sie ein Schmalbild-Layout haben, das bei einer Breite von 480 Pixel oder weniger einsetzt, und der Viewport auf 960 Pixel eingestellt ist, werden Sie Ihr Schmalbild-Layout auf dem Handy nie sehen. Durch die Einstellung width=device-width überschreiben Sie Apples Standardeinstellung width=960px mit der tatsächlichen Breite des Geräts, so dass Ihre Medienabfragen wie vorgesehen funktionieren.
Responsive Design bezieht sich auf ein Website- oder Anwendungsdesign, das auf die Umgebung reagiert, in der es betrachtet wird. Es umfasst eine Reihe von CSS- und HTML-Funktionen und -Techniken und ist heute im Wesentlichen die Art und Weise, wie wir Websites standardmäßig erstellen. Betrachten Sie die Websites, die Sie auf Ihrem Handy besuchen, so ist es wahrscheinlich ziemlich ungewöhnlich, auf eine Website zu stoßen, die eine verkleinerte Desktop-Version ist oder auf der Sie seitwärts scrollen müssen, um etwas zu finden. Das liegt daran, dass sich das Web auf diesen Ansatz der responsiven Gestaltung umgestellt hat.
Mit Hilfe der Layout-Methoden, die Sie in diesen Lektionen gelernt haben, ist es auch viel einfacher geworden, responsive Designs zu erstellen. Wenn Sie neu in der Webentwicklung sind, stehen Ihnen heute viel mehr Werkzeuge zur Verfügung als in den Anfängen des responsiven Designs. Es lohnt sich daher, das Alter der Materialien, auf die Sie Bezug nehmen, zu überprüfen. Die historischen Artikel sind zwar immer noch nützlich, aber die moderne Verwendung von CSS und HTML macht es viel einfacher, elegante und nützliche Designs zu erstellen, unabhängig davon, mit welchem Gerät Ihr Besucher die Website betrachtet.
Es gibt viele Geräte, die auf das Internet zugreifen können, und sie sind in allen Formen und Größen vorhanden. Responsive Webdesign ist die Praxis der Gestaltung flexibler Websites, die auf verschiedene Bildschirmgrößen, Ausrichtungen und Auflösungen reagieren können.
