Hallo habr Ich präsentiere Ihnen die Übersetzung des Artikels
"Learn Responsive Web Design in 5 Minuten" von Per.
In diesem Artikel werde ich Ihnen in 5 Minuten viele Tricks des Responsive Designs beibringen. Dies ist natürlich nicht genug für ein richtiges Studium, aber hier finden Sie eine Übersicht über die folgenden wichtigsten Methoden:
- Relative CSS-Einheiten
- Medienanfragen
- Flexbox
- Responsive Typografie
Relative CSS-Einheiten
Responsives Webdesign basiert auf relativen CSS-Einheiten. Dies sind Einheiten, die ihre Werte von einigen externen Werten erhalten. Dies ist praktisch, da beispielsweise die Bildbreite proportional zur Breite des Browserfensters skaliert werden kann.
Die gebräuchlichsten relativen Einheiten:
In diesem Abschnitt beginnen wir mit dem Prozentsatz% als Maßeinheit, und im letzten Abschnitt betrachten wir die Einheit rem.
Nehmen wir an, wir haben eine sehr einfache Site wie die folgende:
Sein HTML lautet wie folgt:
<body> <h1>Welcome to my website</h1> <image src="path/to/img.png" class="myImg"> </body>
Wie Sie dem unten stehenden GIF entnehmen können, hat unser Standardbild eine feste Breite:
Das Bild reagiert nicht besonders gut, ändern wir also die Breite auf 70%. Wir schreiben einfach folgendes:
.myImg { width: 70%; }
Dadurch wird die Bildbreite auf 70% der Breite des ursprünglichen Elements festgelegt, das in das Tag geschrieben wird. Da das Tag die gesamte Breite des Bildschirms abdeckt, macht das Bild immer 70% des Browserfensters selbst aus.
Hier ist das Ergebnis:
Es ist so einfach, ein ansprechendes Image zu erstellen.
Verwenden von Medienabfragen zur Verbesserung der mobilen Version der Website
Wir haben ein Problem mit unserem ansprechenden Layout - es sieht auf sehr kleinen Bildschirmen seltsam aus. Bei der Anzeige auf einem Mobiltelefon sollte sich die Breite um 70% verringern. Überzeugen Sie sich selbst:
Das Bild in diesem Fall besser aussehen zu lassen, ist nur eine Aufgabe für Medienabfragen. Sie ermöglichen es Ihnen, verschiedene Stile anzuwenden, zum Beispiel abhängig von der Breite des Bildschirms. Wir können vorschreiben, dass wir einen anderen Stil verwenden müssen, wenn die Bildschirmbreite weniger als 768px beträgt.
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:
Wie Sie sehen, hat die Seite einen Haltepunkt, an dem das Bild breiter wird: Wenn das Browserfenster 768 Pixel breit ist, ändert sich die Bildbreite von 70% auf 100%.
Navigationsmenü mit Flexbox
Als nächstes kommt Flexbox. Sie können die Reaktionsfähigkeit einfach nicht verstehen, ohne sich zuerst mit Flexbox vertraut gemacht zu haben. Als Flexbox vor einigen Jahren eingeführt wurde, änderte es sein ansprechendes Design, da dieses Modul das Positionieren von Elementen entlang der Achse erheblich vereinfacht.
Um Flexbox zu verwenden, werden wir unsere Site etwas komplizierter machen, indem wir ein Navigationsmenü über der Kopfzeile hinzufügen. Hier ist das HTML dafür:
<nav> <a href="#">Home</a> <a href="#">About me</a> <a href="#">Contact</a> </nav>
Standardmäßig sieht es so aus:
Unsere Menüpunkte sind nach links verschoben, aber das ist nicht das, was wir brauchen. Wir möchten, dass sie gleichmäßig über die Breite der Seite verteilt sind.
Dazu verwandeln wir den Container einfach in eine Flexbox und wenden dann die magische Eigenschaft "Inhalt ausrichten" an.
nav { display: flex; justify-content: space-around; }
Lass es uns herausfinden. Display: flex verwandelt sich in eine flexible Box. Inhalt ausrichten: Durch Leerzeichen wird dem Browser mitgeteilt, dass die Elemente im flexiblen Container Leerzeichen enthalten sollen. So verteilt der Browser den verbleibenden Platz gleichmäßig um die drei Elemente.
So sieht es aus. Und wie Sie sehen, lässt sich die Site gut skalieren:
Responsive Typografie: rem
Der letzte Schritt besteht darin, unsere Typografie ansprechbar zu machen. Sie sehen, ich möchte, dass das Navigationsmenü und der Titel etwas kleiner sind, wenn die Bildschirmbreite weniger als 768px beträgt (unser Bezugspunkt, erinnerst du dich?).
Eine Möglichkeit, dies zu tun, besteht darin, die Schriftgröße in der Medienabfrage wie folgt zu verringern:
@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } }
Es war alles andere als perfekt. Eine Anwendung kann mehrere Kontrollpunkte und viele Elemente haben (h2, h3, Absätze usw.). Infolgedessen müssen wir alle Elemente in den verschiedenen Haltepunkten verfolgen. Es ist leicht zu erraten, dass dies zu Verwirrung führen wird.
Höchstwahrscheinlich werden sie sich jedoch an verschiedenen Kontrollpunkten mehr oder weniger gleich verhalten. Beispielsweise ist h1 immer mehr als ein Absatz.
Was wäre, wenn es eine Möglichkeit gäbe, ein Element einzurichten und dann die restlichen Schriftgrößen relativ zu diesem Element skalieren zu lassen?
Geben Sie rem ein!
Rem bedeutet im Grunde genommen die Schriftgröße, die Sie für Ihr Element festgelegt haben. Art der folgenden:
html { font-size: 14px; }</source , rem 14px. , rem. : <source lang="xml">h1 { font-size: 2rem; } nav { font-size: 1rem; }
Und dann ändern wir einfach den Schriftgrößenwert für das Tag in unserer Medienanforderung. Dadurch wird die Schriftgröße für unsere h1- und nav-Elemente geändert.
So ändern wir den rem-Wert in einer Medienabfrage:
@media (max-width: 768px) { html { font-size: 14px } }
Und genau so haben wir einen Haltepunkt für alle unsere Schriftgrößen. Beachten Sie, wie sich die Schriftgröße ändert, wenn die Seite die 768-Pixel-Marke überschreitet:
Sie haben gelernt, wie Sie die Schriftgrößen, Bilder und das Navigationsmenü so anpassen, dass sie in nur 5 Minuten auf die Seitenbreite reagieren. Das ist großartig, weil Sie bereits die ersten Schritte unternommen haben, um die sehr wertvollen Fähigkeiten der Erstellung reaktionsfähiger Websites zu beherrschen.
Gute Codierung!