Responsive Design ist die Idee, Ihre Website in jeder Auflösung großartig aussehen zu lassen, nicht nur auf Desktops und Mobilgeräten. Bei einer responsiven Website sind Ihre Desktop- und mobile Website dieselbe Seite und werden mit der Fenstergröße skaliert.
Was ist Responsive Design?
< p>Durch responsives Design kann die Größe Ihrer Website an jeden Bildschirm angepasst werden. Anstatt ein bestimmtes Layout zu entwerfen oder eine separate Mobil- und Desktop-Site zu entwerfen, sollte Ihre Site auf jedes Gerät skaliert werden. In der realen Welt werden die Leute Ihre Website auf verschiedene Weise nutzen; Es gibt kleine Telefone, große Telefone, Tablets, Tablets im Querformat, Netbooks, Laptops und 5K iMacs.
Sehen Sie sich die Homepage von howtogeek.com an. Auf dem Desktop hat es eine Kopfzeile mit einem Logo, Hauptkategorien, Social-Media-Buttons und schließlich ein Hamburger-Menü mit erweiterten Kategorien. Die Artikelboxen sind in einem Raster angeordnet, das mit der Bildschirmgröße skaliert, aber immer nur etwa 1000px benötigt (da eine zu große Skalierung seltsam aussehen würde). Alles in allem gibt es viel Platz zum Arbeiten, daher sieht die Site hier am besten aus.
Verkleinern Sie den Bildschirm ein wenig auf Tablet-Größe, und es ist nicht mehr so viel Platz. Der Text bricht anders, die Bilder werden verkleinert oder beschnitten und die Hauptkategorien verschwinden.
Die Artikelfelder behalten das Layout bei, jedoch auf Kosten zusätzlicher Textzeilen. Der Artikel auf der Titelseite ist jedoch wichtiger und behält sein Seitenverhältnis bei und wird ohne Zuschneiden verkleinert.
Werbung
Und auf wirklich kleinen Geräten kann man es sich nicht wirklich leisten, all diese Schaltflächen im Menü zu haben, und es ist nicht genug Platz, um die Artikelboxen nebeneinander zu platzieren, also ist das Menü zu einem Hamburger zusammengeklappt Menü und die Artikelboxen sind in einer Spalte angeordnet. Diese Spalte nimmt immer die volle Breite des Geräts ein (minus 20px auf jeder Seite zum Auffüllen).
Sie können dies selbst testen, um zu sehen, wie Ihre Website skaliert. Öffnen Sie die Entwicklertools von Chrome, indem Sie mit der rechten Maustaste auf eine beliebige Stelle klicken und “Prüfen” Drücken Sie auf die Schaltfläche für mobile Geräte in der oberen rechten Ecke des sich öffnenden Fensters und wählen Sie “Responsive” als Gerätetyp:
Sie können die Griffe auf am Rand Ihrer Site, um die Größe anzupassen, oder Sie können manuelle Pixelwerte eingeben. Sie können auch eine Vorschau anzeigen, wie es auf gängigen mobilen Auflösungen aussehen wird (obwohl Sie es trotzdem auf einem echten Gerät testen sollten).
Wie funktioniert Responsive Design?
Bevor Sie ein responsives Design erstellen, müssen Sie einen Fehler mit mobilen Seiten und dem Darstellungsbereich beheben. Ohne dieses Meta-Tag in Ihrem HTML-Header wird Ihre mobile Seite möglicherweise herausgezoomt und nicht richtig angezeigt. Dies ist möglicherweise bereits festgelegt, da es sich um ein ziemlich häufiges Stück Boilerplate handelt, aber wenn dies nicht der Fall ist, fügen Sie es hinzu:
<meta content=”width=device-width, initial -scale=1″ name=”viewport” />
Die wichtigste Möglichkeit, Websites reaktionsfähig zu machen, ist das magische Display: Flex-Property, auch bekannt als Flexbox. Flexbox funktioniert, indem die Größe der Elemente innerhalb eines Containers angepasst wird, um sie mit einer sich ändernden Fenstergröße zu skalieren. Sie beginnen damit, einen Container zu erstellen und ihn so einzustellen, dass er angezeigt wird: flex:
.container { display: flex; }
Und dann legen Sie den Flex-Parameter aller untergeordneten Elemente fest:
.child { flex: 1; } Werbung
Dadurch werden die untergeordneten Elemente erweitert und nehmen so viel Platz ein, wie es der Container zulässt. Wenn Sie beispielsweise zwei Kinder hätten, würde jedes 50 % des Platzes einnehmen:
Wenn Sie stattdessen das zweite Kind auf Flex: 2 setzen, würde es doppelt so lange dauern viel Platz als die anderen (insgesamt 66%).
Wenn der Bildschirm verkleinert wird, werden die Kinder mit ihm verkleinern. Sie erreichen jedoch einen Punkt, an dem sie nicht kleiner als ihr Inhalt verkleinern können, aber Sie können sie mit Flex-Wrap auf dem Container in eine andere Zeile umbrechen (genau wie Text).
.container { flex-wrap: wrap; }
Jetzt werden Sie nie wieder Probleme haben, den Inhalt Ihrer Website außerhalb des Bildschirms zu sehen oder so zerknüllt, dass es unleserlich ist.
Ein weiteres Stück CSS-Technologie hinter Responsive Design sind Media Queries. Medienabfragen sind wie CSS-If-Anweisungen, mit denen Sie einen Wert überprüfen können, bevor Sie CSS anwenden. Sie können dies verwenden, um Komponenten basierend auf der Breite des Browsers dynamisch zu stylen. Wenn Sie beispielsweise eine obere Menüleiste auf Mobilgeräten ausblenden und durch ein Hamburgermenü ersetzen möchten, können Sie sie mit einer @media Abfrage ausblenden:
.topmenu { display: block } @media screen and (max -width: 600px) { .topmenu { Anzeige: keine; } }
600px ist nur ein willkürlicher Wert, der verwendet wird, um die Grenzen der meisten Mobilgeräte zu definieren, aber Sie können viele Haltepunkte haben, die das Design ändern. Sie können diese in Kombination mit Flexbox verwenden, um die Flex-Eigenschaften basierend auf der Gerätegröße zu ändern; Eine gängige Verwendung besteht beispielsweise darin, horizontale Listen vertikal und zentriert anzuzeigen, um die Lesbarkeit auf Mobilgeräten zu erleichtern.
Werbung
Responsive Design hat viel mehr zu bieten, als wir hier behandeln können Wenn Sie mehr über das CSS dahinter erfahren möchten, können Sie diese großartige Anleitung zu Flexbox von CSS Tricks lesen oder die W3Schools-Dokumentation für Medienabfragen lesen.
Wie mache ich meine Website responsive?
Wenn Sie keine Zeit damit verbringen möchten, Ihre Site mit Flexbox zu überarbeiten, gibt es viele responsive Site-Vorlagen, die Sie als Basis verwenden können, darunter viele kostenlose. Viele Vorlagen, die Sie mit verwalteten Hosting-Anbietern (GoDaddy, SquareSpace, Wix usw.) verwenden können, sind sofort einsatzbereit. Underscores ist eine großartige kostenlose Starter-Vorlage für WordPress.
Wenn Sie es selbst programmieren möchten, aber nicht alles von Hand machen möchten, gibt es viele Bibliotheken von Drittanbietern für die Arbeit mit Flexbox. Die beliebteste davon ist Bootstrap, die benutzerfreundliche Klassen für die Arbeit mit Flexbox (zusammen mit vielen anderen nützlichen UI-Elementen) hinzufügt. Bei Bootstrap geben Sie Container mit der Zeilenklasse und dann die Spaltengröße mit Klassen wie col-md-6 an, und das CSS wird für Sie verarbeitet. Der folgende Code ordnet beispielsweise jedes div auf dem Desktop in einer Dreierreihe an und fügt einen Medienabfrage-Haltepunkt hinzu, um es auf Mobilgeräten in eine Spalte mit voller Breite zu verwandeln:
<div class=”row”> <div class=”col-md-4 col-sm-12″> //Inhalt </div> <div class=”col-md-4 col-sm-12″> //Inhalt </div> <div class=”col-md-4 col-sm-12″> //Inhalt </div> </div>
Größen werden aus 12 gemessen, also setzt col-md-4 das div auf mittlerer Größe (“md”) auf 33 % Breite und col-sm-12 setzt es auf kleinen Geräten auf 100 % Breite (” sm”).
Bootstrap hat auch eine Menge Themen und Vorlagen, mit denen Sie beginnen können. Es wurde entwickelt, um Sie sehr schnell auf den Weg zu bringen und die Zeit loszuwerden, die Sie mit Boilerplate-HTML und CSS (daher der Name) verbringen müssen.