Inhalt
- Schriftgrößeneinheiten
- Erstellen eines Moduls mit ems
- Dynamisches Skalieren des Designs
- Reaktionsschnell machen
Sie haben wahrscheinlich gehört, dass Sie relative Einheiten für die Schriftgröße verwenden sollten. Dies ist eine gute Regel für barrierefreies Webdesign. Wenn der Benutzer die Standardschriftgröße seines Browsers ändert, kann der Text Ihrer Seite entsprechend angepasst werden. Möglicherweise haben Sie diesen Rat befolgt und den Wechsel vorgenommen. Vielleicht haben Sie Ihren Taschenrechner herausgeholt und die Schriftgrößen Ihrer Website von absolut konvertiert px Einheiten zu ems oder wahrscheinlicher rems.
Aber wenn Sie hier aufgehört haben, verpassen Sie viel Flexibilität und Leistung, die ems dem Browser bringen. Die em-Einheit ist nicht nur ein Ersatz für das Vertraute px;; Sie können es für mehr Eigenschaften als nur verwenden Schriftgröße. Wenn Sie dies tun, beginnen sich einige seiner anderen Vorteile abzuzeichnen.
Durch die konsequente Verwendung von ems können Sie Komponenten auf der Seite entwerfen, die automatisch reagieren, wenn sich die Schriftgröße ändert. Mit einem cleveren Trick für eine reaktionsschnelle Schriftgröße können Sie dann eine ganze Seite erstellen, die sich dynamisch an die Breite des Ansichtsfensters des Browsers anpasst. Lassen Sie mich Ihnen zeigen, wie Sie das relative Verhalten von ems nutzen können, um skalierbare und reaktionsschnelle Designs zu erstellen.
Schriftgrößeneinheiten
Die Verwendung von ems für die Schriftgröße kann schwierig sein. Der genaue Wert wird durch die geerbte Schriftgröße des Elements bestimmt (d. H. Die Schriftgröße des übergeordneten Elements). Dies wird kompliziert, wenn Sie anfangen, Elemente tiefer zu verschachteln. Wenn ein Element eine Schriftgröße in ems hat, hat sein übergeordnetes Element eine Schriftgröße in ems und sein übergeordnetes Element eine weitere. Sie müssen alle diese Werte multiplizieren, um den tatsächlich berechneten Wert des untergeordneten Elements zu ermitteln.
Dies bedeutet, dass das Platzieren desselben Moduls in verschiedenen Containern die Bedeutung von em ändern kann. Das Modul ist unvorhersehbar.
Um dies zu vermeiden, verwenden wir normalerweise eine andere relative Einheit für die Schriftgröße: rems. Ein Rem (oder "root em") basiert nicht auf der geerbten Schriftgröße, sondern auf der Schriftgröße des Stammelements der Seite. html>. Dies bedeutet, dass der Wert auf der gesamten Seite gleich ist. Es ist vorhersehbarer als normale ems und oft vorzuziehen.
Erstellen eines Moduls mit ems
Verwenden wir relative Einheiten, um ein Modul zu erstellen. Wir werden jedoch nicht dem gemeinsamen Ansatz folgen. Anstatt rem für alles zu verwenden, werden wir es nur einmal verwenden: auf dem obersten Element des Moduls. Dadurch wird eine bekannte Schriftgröße für das Modul festgelegt, anstatt auf einer unvorhersehbaren Kette von em-Werten darüber im DOM zu basieren. Dies bedeutet, dass wir die Größe des Moduls einfach skalieren können, indem wir einen einzelnen Wert überschreiben.
Nachdem wir diese bekannte Schriftgröße festgelegt haben, können wir sicher reguläre Ems im gesamten Modul verwenden. Verwenden Sie es nicht nur für Schriftgrößen für die Unterelemente, sondern auch für die meisten anderen Eigenschaften, einschließlich Polsterung, Spanne und Randradius.
Wir werden ein Panel mit einer Überschrift und einem Körper erstellen. Das Markup sieht folgendermaßen aus:
div> div> h3> Sehen Sie sich die Leistung von ems / h3> / div> div> an. Überlegen Sie, wie Sie relative Einheiten für die dynamische Dimensionierung Ihrer Module nutzen können. / div> / div>
Gestalten wir den Außenbehälter. Wir stellen die Schriftgröße auf ein 1rem um unseren lokalen em Wert zu etablieren. Wir werden dann das definieren Randradius mit ems. Normalerweise verwende ich jedoch gerne px als Rahmen, um eine schöne feine Linie zu erhalten.
.panel {Schriftgröße: 1rem; Rand: 1px fest # 678; Randradius: 0,3 em; Überlauf versteckt; }}
Als nächstes stylen Sie die inneren Elemente. Wir werden ems zum Auffüllen verwenden. Dann erhöhen wir die Schriftgröße der Überschrift auf das 1,25-fache unseres lokalen em-Werts und erhalten eine berechnete Größe von 20 Pixel.
.panel-heading {padding: 0.6em 1.2em; Hintergrundfarbe: #cde; Rand unten: 1px durchgehend # 678; } .panel-Heading> h3 {Schriftgröße: 1.25em; Rand: 0; Buchstabenabstand: 0,03em; } .panel-body {padding: 0.6em 1.2em; }}
Sie können die Füllwerte mit ihrer Schriftgröße multiplizieren, um ihre berechneten Werte zu bestimmen (9,6 Pixel vertikal und 19,2 Pixel horizontal). Ehrlich gesagt spielt es jedoch keine Rolle. Versuchen Sie, sich nicht mit pixelgenauen Messungen zu verzetteln. Dies mag sich unangenehm anfühlen, aber drücken Sie weiter. Je häufiger Sie ems verwenden, desto mehr werden Sie sie als Einheit in ihrer eigenen Hinsicht kennenlernen.
Dynamisches Skalieren des Designs
Wenn wir solche wiederverwendbaren Module erstellen, stellen wir häufig fest, dass wir einige Variationen benötigen. Angenommen, wir wollten eine größere Version erstellen. Wenn wir px für alles verwenden würden, würde dies bedeuten, die Schriftgröße, den Abstand, den Rahmenradius usw. zu erhöhen. Da wir jedoch alles in Bezug auf eine rem-basierte Schriftgröße definiert haben, müssen wir nur diesen Wert ändern, und das gesamte Modul antwortet:
.panel - groß {Schriftgröße: 1.2rem; }}
Wir fügen diese Klasse einfach einem Panel hinzu, um es größer zu machen: div>. Dadurch wird die lokale Definition eines Em geändert, und daher ändern sich auch der Rahmenradius und die Auffüllung sowie die Schriftgröße der untergeordneten Elemente. Mit einer einzigen Deklaration haben wir die Größe jedes Teils des Moduls geändert.
Ebenso könnten wir eine kleine Version erstellen:
.panel - klein {Schriftgröße: 0.8rem; }}
Durch die Erdung des Moduls mit einer Schriftgröße der obersten Ebene in Rems haben wir es stabil und vorhersehbar gemacht. Durch die Definition aller anderen Elemente in ems haben wir alle Komponenten skalierbar gemacht.
Dies ist ein starkes Muster. Sie können diesen Ansatz für alles auf Ihrer Seite verwenden, von Dropdown-Menüs bis hin zu Social Media-Schaltflächen. Erden Sie das Modul mit einem Rem-Wert und verwenden Sie es dann für praktisch alles andere, von Auffüllungen über die Positionierung bis hin zu Symbolgrößen.
Reaktionsschnell machen
Lassen Sie uns das Prinzip um eine Ebene weiter vorantreiben.Wir haben das Modul (und theoretisch alle anderen Module auf der Seite) mithilfe von Rems und Ems dimensioniert. Dies bedeutet letztendlich, dass ihre Größe auf der Schriftgröße des Stammelements basiert. Dann können wir diesen einzelnen Wert anpassen, damit die gesamte Seite der Reihe nach reagiert.
Lassen Sie uns eine andere relative Einheit einbringen: vh. Der berechnete Wert dieses Geräts wird von der Bildschirmgröße des Benutzers abgeleitet. Dies entspricht 1 Prozent der Breite des Ansichtsfensters. Wenn wir die vh-Einheit verwenden, um die Root-Schriftgröße zu definieren, wird sie automatisch ohne Medienabfragen skaliert. Stellen Sie die Schriftgröße im Stammverzeichnis auf ein 2vw:
html {Schriftgröße: 2vw; }}
Leider ist der Effekt etwas zu stark. Auf einem iPhone 6 wird dies beispielsweise auf 5,5 Pixel berechnet, was zu klein ist. Ebenso ist es auf größeren Bildschirmen unangemessen groß. Um den Effekt abzuschwächen, können wir CSSs verwenden calc () Funktion:
html {Schriftgröße: calc (0.6em + 1vw); }}
Jetzt wird die Schriftgröße teilweise von einem stabilen Wert und teilweise von einem reaktionsfähigen Wert abgeleitet. Dies erzeugt einen viel besseren Effekt. Das 0,6em verhält sich wie eine Art Mindestschriftgröße. Jetzt skaliert das Root-Em flüssig von etwa 13 Pixel auf dem Smartphone auf 21 Pixel auf einem durchschnittlichen Desktop-Bildschirm.
Wenn Ihre Seite aus skalierbaren Modulen besteht, die jeweils auf den Rem-Wert geerdet sind, werden auch diese mit dem Ansichtsfenster skaliert. Die Seite ist mit einer dreistufigen Hierarchie strukturiert. Sie können die Größe der gesamten Seite, eines einzelnen Moduls oder eines einzelnen Elements ändern, indem Sie die Schriftgröße einfach bearbeiten. Vertrauen Sie den ems und rems, und der Browser übernimmt die Arbeit für Sie.
Möglicherweise müssen Sie noch gelegentliche Medienabfragen hinzufügen, um den Zeilenumbruch und einige andere Probleme zu steuern. Aber dieses kleine Stück Code in Kombination mit der Gewohnheit, ems und rems zu verwenden, bringt Sie viel dorthin.
Dieser Artikel wurde ursprünglich in vorgestellt Netzmagazin Ausgabe 288; kauf es hier
