Responsive Design Tutorial - Lernen Sie Responsive Web Design in 5 Minuten

In diesem Artikel werde ich Ihnen in fünf Minuten so viele reaktionsschnelle Designtechniken wie möglich beibringen. Dies reicht natürlich nicht aus, um es richtig zu lernen, aber es gibt Ihnen einen Überblick über die wichtigsten Konzepte, die ich persönlich als diese definiere:

  • Relative CSS-Einheiten
  • Medien-Anfragen
  • Flexbox
  • Responsive Typografie

Wenn Sie sich später eingehender mit dem Thema befassen möchten, können Sie sich unser Bootcamp für reaktionsschnelle Webentwickler auf Scrimba ansehen, mit dem Sie reaktionsschnelle Websites auf professioneller Ebene erstellen können.

Aber jetzt fangen wir mit den Grundlagen an!

Relative CSS-Einheiten

Im Zentrum des responsiven Webdesigns stehen relative CSS-Einheiten. Dies sind Einheiten, die ihren Wert von einem anderen externen Wert erhalten. Dies ist praktisch, da beispielsweise die Breite eines Bildes von der Breite des Browsers abhängt.

Die häufigsten sind:

  • %.
  • em
  • rem
  • vw
  • vh

In diesem Artikel beginnen wir mit der prozentualen Einheit %und betrachten dann die remEinheit im letzten Abschnitt.

Angenommen, Sie haben eine sehr einfache Website wie diese:

Alt-Text

Sein HTML ist nur das Folgende:

Welcome to my website

Wie Sie dem GIF unten entnehmen können, hat unser Bild standardmäßig eine feste Breite:

Alt-Text

Das ist nicht besonders reaktionsschnell, also ändern wir das stattdessen auf 70 Prozent. Wir machen einfach folgendes:

.myImg { width: 70%; } 

Dadurch wird die Breite des Bilds auf 70 Prozent der Breite des übergeordneten Bilds festgelegt, bei dem es sich um das Tag handelt. Da sich das Tag über die gesamte Bildschirmbreite erstreckt, macht das Bild immer 70 Prozent des Bildschirms aus.

Hier ist das Ergebnis:

Alt-Text

Und so einfach ist es, ein ansprechendes Bild zu erstellen!

Verwenden von Medienabfragen zur Verbesserung des mobilen Erlebnisses

Wir haben jedoch ein Problem mit unserem reaktionsschnellen Layout, nämlich dass es auf sehr kleinen Bildschirmen seltsam aussieht. Die Breite von 70% ist beim Betrachten auf Mobilgeräten zu schmal. Überzeugen Sie sich selbst:

.

Alt-Text

.

In dieser Situation besser aussehen zu lassen, ist eine perfekte Aufgabe für Medienabfragen. Mit ihnen können Sie verschiedene Stile anwenden, die beispielsweise auf der Breite des Bildschirms basieren. Grundsätzlich können wir sagen, wenn der Bildschirm weniger als 768 Pixel breit ist, verwenden Sie ein anderes Design.

So erstellen wir eine Medienabfrage in CSS:

@media (max-width: 768px) { .myImage { width: 100% } } 

Dieser CSS-Block wird nur angewendet, wenn die Bildschirmbreite weniger als 768 Pixel beträgt.

Hier ist das Ergebnis:

Alt-Text

Wie Sie sehen können, hat die Seite einen Haltepunkt, an dem das Bild plötzlich breiter wird. In diesem Fall ist der Browser 768 Pixel breit und das Bild wechselt zwischen 70%und 100%.

Verwenden von Flexbox für die Navigationsleiste

Als nächstes kommt Flexbox. Sie können einfach nichts über Reaktionsfähigkeit lernen, ohne etwas über Flexbox zu lernen. Es hat das Responsive Design-Spiel geändert, als es vor einigen Jahren eingeführt wurde, da es viel einfacher ist, Elemente reaktionsschnell entlang einer Achse zu positionieren.

Um Flexbox nutzen zu können, wird unsere Website durch Hinzufügen einer Navigationsleiste über dem Titel etwas komplexer. Hier ist der HTML-Code dafür:

 Home About me Contact  

Standardmäßig sieht es einfach so aus.

.

Alt-Text

.

Unsere Navigationselemente sind alle auf der linken Seite zusammengedrückt, was wir nicht wollen. Wir möchten, dass sie gleichmäßig auf der Seite verteilt sind.

Um dies zu erreichen, verwandeln wir den Navigationscontainer einfach in eine Flexbox und verwenden dann die magische justify-contentEigenschaft.

nav { display: flex; justify-content: space-around; } 

Das display: flexverwandelt das in eine flexible Box und justify-content: space-aroundteilt dem Browser mit, dass die Elemente in der flexiblen Box Platz um sie herum haben sollen. Der Browser verteilt also den gesamten verbleibenden Speicherplatz gleichmäßig auf die drei Elemente.

So sieht es aus. Und wie Sie feststellen werden, lässt es sich gut skalieren:

Alt-Text

.

Responsive Typografie: rem

Der letzte Schritt besteht darin, auch unsere Typografie ansprechbar zu machen. Sie sehen, ich möchte, dass die Navigationsleiste und der Titel etwas kleiner werden, wenn der Bildschirm weniger als 768 Pixel breit ist (unser Haltepunkt für Medienabfragen, erinnerst du dich?).

Eine Möglichkeit, dies zu tun, besteht darin, alle Schriftgrößen in der Medienabfrage wie folgt zu verringern:

@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } } 

Dies ist jedoch nicht ideal. Möglicherweise haben wir mehrere Haltepunkte in der App und haben auch mehrere Elemente (h2, h3, Absätze usw.). Infolgedessen müssen wir alle Elemente in den verschiedenen Haltepunkten verfolgen. Es wird ein Chaos sein!

Höchstwahrscheinlich werden sie sich jedoch über die verschiedenen Haltepunkte hinweg mehr oder weniger auf dieselbe Weise zueinander verhalten. Zum Beispiel ist der h1immer größer als der paragraph.

Was wäre, wenn ich einen Faktor anpassen und dann den Rest der Schriftgrößen relativ zu diesem Faktor skalieren könnte?

Rems eingeben!

A remist im Grunde das: Der Wert für die Schriftgröße, den Sie für Ihr Element festgelegt haben. Gefällt mir das:

html { font-size: 14px; } 

In diesem Dokument rementspricht man also 14px.

Das bedeutet, dass wir alle unsere Schriftgrößen auf unserer Website in remEinheiten wie folgt einstellen können :

h1 { font-size: 2rem; } nav { font-size: 1rem; } 

Und dann ändern wir einfach den Schriftgrößenwert für das Tag in unserer Medienabfrage. Dadurch wird sichergestellt, dass sich auch die Schriftgröße für unsere h1und   navElemente ändert.

So ändern wir unseren remWert in einer Medienabfrage:

@media (max-width: 768px) { html { font-size: 14px } } 

Und genau so haben wir auch einen Haltepunkt für alle unsere Schriftgrößen. Beachten Sie, wie sich die Schriftgröße ändert, wenn die Seite die 768-Pixel-Marke überschreitet:

Alt-Text

Es sind nur fünf Minuten vergangen, aber jetzt haben Sie tatsächlich gelernt, Schriftgrößen, Bilder und Navigationsleistenelemente so zu gestalten, dass sie auf die Breite der Seite reagieren. Das ist ziemlich gut, und Sie haben Ihre ersten Schritte unternommen, um die äußerst wertvollen Fähigkeiten zum Erstellen reaktionsfähiger Websites zu erlernen.

Wenn Sie daran interessiert sind, diese Lernreise fortzusetzen, würde ich Ihnen empfehlen, sich unseren umfangreichen Scrimba-Kurs zu diesem Thema anzusehen! Es wird von einem der beliebtesten Lehrer von YouTube zu diesem Thema unterrichtet und bringt Sie auf ein professionelles Niveau im reaktionsschnellen Webdesign.

Viel Spaß beim Codieren :)

Danke fürs Lesen! Mein Name ist Per Borgen, ich bin Mitbegründer von Scrimba - der einfachste Weg, das Codieren zu lernen. Sie sollten sich unser Responsive Web Design Bootcamp ansehen, wenn Sie lernen möchten, moderne Websites auf professioneller Ebene zu erstellen.