Warum sollten Sie Rem-basierte Layouts verwenden?

Das rem Einheit wird verwendet, um Schriftarten relativ zu definieren, und nicht mit einer absoluten Größe in Pixel. Aber wussten Sie, dass diese Einheit sowohl für Layouts als auch für Typografie nützlich ist?

In diesem Video-Lernprogramm aus meinem CSS-Layout-Kurs erfahren Sie, warum die Verwendung von großem Nutzen ist rem Einheiten für Layouts.

Die Vorteile von Rem-basierten Layouts

 

Im CSS-Layout-Kurs werden alle unsere Layoutspezifikationen mithilfe von rem Einheit. Wie wir im Typografie-Kurs ausführlicher erwähnt haben, a rem Einheit ist ein Vielfaches der Grundschriftgröße für Ihre Seite.

Das rem Die Einheit ist nicht nur für die Typografie, sondern auch für Ihr Layout nützlich. Ich werde Ihnen zeigen, warum Sie sie verwenden sollten rem Einheiten, wenn Sie Ihr Layout einrichten. 

Beginnen wir mit einem Blick auf die Beispielseite, an der wir gerade arbeiten:

Wenn ich dann die Schriftgröße im Browser ändere, können Sie feststellen, dass die Schriftgröße auf der Seite zunimmt:

Wenn Sie jetzt die Schriftgröße erhöhen und aktualisieren, können Sie jetzt feststellen, dass das gesamte Layout angepasst wurde, um die größere Schriftgröße zu berücksichtigen. 

Alles ist noch lesbar, und das ist möglich, weil rem Damit wir unser gesamtes Layout einrichten können, stellen wir sicher, dass alles flexibel ist, abhängig von der Stammschriftgröße unseres Dokuments, die sich aus den Browsereinstellungen ergibt.

Wenn ich die Schriftgröße wieder auf eine wirklich kleine Größe verkleinere und noch einmal erneuere, können Sie feststellen, dass das gesamte Layout wieder verkleinert wurde. 

Also mit diesen rem Bei Einheiten wird darauf geachtet, dass sich der Text selbst ändert, wenn ein Benutzer die Schriftgröße ändert, und auch das gesamte Layout.

Sehen Sie sich den vollständigen Kurs an

Im gesamten Kurs Start Here: Learn CSS Layout setzen Sie das Erlernte in diesem Video in die Praxis um, indem Sie verschiedene Layouts erstellen rem Einheiten. Sie erfahren alles, was Sie wissen müssen, um die am häufigsten verwendeten Layouttypen im Webdesign zu erstellen. Wir werden die Größenanpassung, Ausrichtung, Abstände und bewährte Methoden zum Erstellen von responsivem CSS behandeln.

Wenn Sie gerade erst anfangen und CSS beherrschen möchten, lesen Sie Learn CSS: The Complete Guide.

Oder Sie können mit weiteren Kursen aus unserer "Start Here" -Serie für Anfänger im Webdesign experimentieren:

  • Beginnen Sie hier: Lernen Sie HTML-Grundlagen
  • Beginnen Sie hier: Lernen Sie CSS-Typografie
  • Beginnen Sie hier: Lernen Sie CSS-Farben und -Hintergründe