Share
Ich habe kürzlich über Ems geschrieben; was sie sind, wie sie verwendet werden, und ein paar Kleinigkeiten, die zu beachten sind, wenn Sie sie selbst implementieren. Ich habe nur die Oberfläche gekratzt, und der Kommentarfaden warf doppelt so viele Fragen wie der Artikel beantwortete! In diesem Follow-up gehe ich weiter und schaue mir die ems noch genauer an.
E auf Dribbble Hinweis: Der vorhergehende Artikel behandelt alle Grundlagen. Ich empfehle, dass Sie sich darüber informieren, bevor Sie fortfahren.
Das Thema der unitless-Messungen (dh Werte ohne Pixel, Prozentsätze, Ems, Yards, Fathoms ...) wurde beim letzten Mal von ein paar Leuten angeboten, zumal ich die Verwendung von Ems zum Spezifizieren angeregt hatte Zeilenhöhe.
Ems macht in diesem Fall vollkommen Sinn, da sie relativ zu dem sind Schriftgröße. Wenn der betreffende Text größer oder kleiner wird, gilt auch für die Zeilenhöhe, wenn er in ems eingestellt ist. Absolute Einheiten wie Pixel würden die Dinge wirklich durcheinander bringen. Das gleiche gilt für Buchstaben-Abstand, ein weiteres Beispiel für eine Dimension, die sollte immer relativ zur Schriftgröße sein.
Dies können wir jedoch verbessern. Ems machen die Dinge komplizierter, wenn ihre Werte kaskadieren. Elemente erben die em-Werte ihrer Eltern. Nehmen Sie zum Beispiel diese Anordnung: einen Artikel, der einen Absatz enthält:
Wenn wir die Zeilenhöhe auf den Artikel anwenden, wird diese auch vom Absatz übernommen, was in Ordnung ist:
Aber was der Absatz eigentlich erbt, ist das berechneter Wert (in diesem Fall effektiv 24px), daher ist die Zeilenhöhe relativ zur Schriftgröße des Artikels und nicht die eigene. Wenn wir die Schriftgröße des Absatzes auf das Äquivalent von 20px erhöhen:
dann bleibt die Zeilenhöhe stabil bei 24px. Idealerweise möchten wir, dass die Zeilenhöhe 1,5 * 20 = 30px ist.
Hier kommen unitlose Messungen ins Spiel. Durch Entfernen der em-Einheit aus der Zeilenhöhe des Artikels:
Stattdessen erbt der Absatz den unitless-Wert. 1.5. Die Zeilenhöhe des Absatzes ist jetzt relativ zu seiner eigenen Schriftgröße, Bingo!
Accentsconagua
Interessanterweise trifft dies jedoch nicht zu Buchstaben-Abstand. Und du kannst völlig vergessen Ränder, Texteinzug, diese Art von Ding.
Wenn Sie mehr über das Thema erfahren möchten, das Eric Meyer 2006 ausführlich behandelt hat, hat Harry Roberts einen großartigen Überblick über Maßeinheiten aus ein paar Jahren.
Wohingegen Mikrotypographie verweist auf die winzigen Details innerhalb eines Dokuments (Satzzeichen, Ligaturen, Silbentrennung, Kerning usw.) Makrotypographie behandelt alle "großen" Sachen. Denken Sie an alle Aspekte der Typografie, die einen Textkörper lesbar machen. Leerzeichen, Zeilenlänge (Maß), Absatzeinzug usw.
Schauen Sie sich diese Flüssigkeitssäulenanordnung an:
Ein perfekt anständiges Layout; zwei divs, jeweils genau 50% breit, mit ein paar Polsterungen links und rechts, um die Dachrinnen zu bilden (innerhalb jedes divs, vorausgesetzt, dass * box-size: border-box verwendet wird). Normalerweise sind Sie versucht, die Auffüllung anhand von Pixeln oder (noch besser) Prozentwerten zu definieren, wenn Sie sich extrem flexibel fühlen.
Pixel und Prozentsätze wirken sich jedoch nachteilig auf die Lesbarkeit des Inhalts aus, wenn (wann) die Schriftgröße geändert wird. Die Rinnenbreite sollte, wie bei Whitespace im Allgemeinen, wirklich relativ zum Text sein. In diesem Beispiel haben wir zwei Textspalten mit Rinnen als Prozentsatz der Spaltenbreite, genau wie oben beschrieben:
.Spalte Breite: 50%; Schwimmer: links; Polsterung: 0 3%;
Dies ist eine Live-Demo, werfen Sie einen Blick und machen Sie sich selbst ein wenig… Wenn Sie jedoch die Schriftgröße ändern, werden Sie feststellen, dass die Rinne relativ schmaler wird, wodurch die Unterteilung zwischen den Textspalten verwischt wird und das Lesen schwieriger wird.
Dies ist ein extremes Beispiel mit absurd großem Text für die Spaltenbreite, aber es veranschaulicht den Punkt… Weitaus besser wäre es, die Auffüllung mit ems zu definieren:
.Spalte Breite: 50%; Schwimmer: links; Polsterung: 0 1.2em;
Auf diese Weise wächst und schrumpft die Rinne zusammen mit dem Text, wobei der Abstand zwischen den Spalten beibehalten und die Dinge lesbar bleiben.
Versuchen Sie, mit diesem zu spielen… Wenn Sie ems noch nicht verwenden, liegt dies wahrscheinlich an einem von zwei Dingen, die Sie an ihnen nicht mögen. die Tatsache, dass ihre Werte kaskadieren oder diese Werte überhaupt berechnen müssen.
Der Ansatz von 62,5% (erstmals 2004 von Richard Rutter vorgeschlagen) wird Ihnen beim zweiten Ansatz helfen. Anstatt die Basis-Schriftgröße auf 100% zu setzen (wir nehmen an, dass dies 16px ist), setzen wir sie einfach auf 62.5%, effektiv 10px.
Ab diesem Zeitpunkt ist 1em = 10px. Deshalb:
| Ems | Äquivalente Pixel |
| 0,5 em | 5px |
| … | … |
| 1.1em | 11px |
| 1.2em | 12px |
| 1.3em | 13px |
| 1.4em | 14px |
| … | … |
| 47.3em | 473px |
und so weiter, was einige der mentalen Arithmetik beseitigen sollte. jedoch, Es gibt ein kleines Problem mit diesem Ansatz, und alles hat mit… zu tun.
Wir werden gleich ein wenig über die Einschränkung von 62,5% sprechen, aber zuerst müssen wir ein paar Fundamente legen.
In ihrer einfachsten Form helfen uns Medienabfragen dabei, CSS-Regeln unter verschiedenen Umständen anzuwenden, meistens abhängig von der Bildschirmgröße. Bildschirmauflösungen werden in Pixel gemessen. Daher ist es nur logisch, dass Medienabfragen auf dieselbe Weise definiert werden:
@media only screen und (min-width: 600px) / * einige Sachen * /
Wenden wir das auf unsere vorherige Demo an, um die Spalten nach einem bestimmten Punkt aufzuteilen.
Bei diesem mobilen ersten Ansatz werden unsere Spalten aufgeteilt, sobald der Darstellungsbereich 600 Pixel erreicht Die willkürliche Zahl von 600px ist in diesem Fall einfach gut. optimale Leitungslänge (oder messen) ist ein viel diskutiertes Thema, aber wie Robert Brighurst feststellt:
45 bis 75 Zeichen werden weithin als zufriedenstellende Zeilenlänge für eine einspaltige Seite in einer serifenförmigen Textfläche in Textgröße betrachtet. Die 66-stellige Zeile (die sowohl Buchstaben als auch Leerzeichen zählt) wird allgemein als ideal angesehen.
Robert Brighurst - Die Elemente des typografischen Stils
In unserer Demo bei einer Schriftgröße von 1em trifft das Maß jetzt auf etwa 70 Zeichen, bevor es in zwei Spalten aufgeteilt wird.
Sobald wir zwei Säulen getroffen haben, ist das Maß vielleicht etwas schmaler als wir es Idealerweise mögen, aber diese Säulen sind für die Zwecke dieser Demo vollkommen in Ordnung. Es treten jedoch Probleme auf, wenn wir die Schriftgröße Ihres Browsers ändern (Befehl Befehl +)..
Die Schriftgröße wurde auf "Sehr groß" (ich verwende Chrome) erhöht Weg zu eng, wodurch der Inhalt ziemlich unlesbar wird. Aus diesem Grund sollten wir in Betracht ziehen, unsere Medienabfragen auch in Bezug auf die Schriftgröße vorzunehmen.
Erinnern Sie sich an die Formel aus unserem vorherigen Artikel?
Wir zielen auf 600px ab einer vererbten Schriftgröße von 16px. 600/16 = 37,5 em, Ändern wir also unsere Medienanfrage, um dies zu berücksichtigen:
Wenn nun die Einstellungen für die Schriftgröße unseres Browsers geändert werden, sehen wir einen Unterschied im Verhalten der Medienabfrage. Bei größerem Text ist hier die pixelbasierte Medienabfrage mit einem Darstellungsbereich von etwa 630 Pixeln Breite:
Bei dieser Bildschirmbreite hält die EM-basierte Medienabfrage die Dinge in einer Spalte. schön und lesbar.
Vergrößern / Verkleinern und beobachten Sie, wie die Medienabfrage wirksam wird Hier ist das Knirschen; EM-basierte Medienanfragen haben keinerlei Interesse an einer Größenanpassung html, Karosserie, oder Wasauchimmer; Sie sind relativ zur Schriftgröße des Browsers. Das bedeutet, dass Sie durch Festlegen der Basisschriftgröße auf einen anderen Wert als 100% zwei Skalen der Em-Werte verwalten müssen.
Arbeiten Sie zu 100% und alles beginnt mit einem Level Playing Field. Außerdem, wie die Filament-Gruppe argumentiert, werden Sie durch das Arbeiten auf diese Weise davon abgehalten, in Pixeln zu denken.
Ein Wort tauchte mehr als jedes andere im Kommentarthread des vorherigen Artikels auf. mixin. Wenn Sie Schwierigkeiten haben, sich mit den Berechnungen zu befassen, lassen Sie einen CSS-Präprozessor das Schwergewicht für Sie übernehmen?
Mit CSS-Preprozessoren wie Sass, LESS und Stylus können Sie Mixins und Funktionen definieren. Diese akzeptieren Parameter und berechnen und berechnen CSS-Werte für Sie.
Hinweis: Wenn Sie mit dem Konzept noch nicht vertraut sind, werfen Sie einen Blick auf Mastering Sass: Lektion 2, in der Jeffrey Sass-Mixins einführt.
Mixins und Funktionen können alle möglichen Dinge für Sie erledigen, einschließlich der umständlichen Mathematik, die Ems umgibt.
Nehmen Sie dieses einfache Beispiel von Garrett Winder in Erskine. Er beginnt mit dem Definieren einer Funktion ("em" genannt), die zwei Werte akzeptiert (genau wie unsere Formel von vorigen), obwohl der Kontextwert den Standardwert 16 hat. Daher muss er nicht erneut angegeben werden, es sei denn, dies ist erforderlich.
Wir können diese "em" -Funktion danach in CSS verwenden und bitten, das Äquivalent von 30px zu berechnen:
Die beim Kompilieren das CSS in seiner Rohform ausgibt:
Und dies ist nicht das einzige Beispiel dieser Art. Tausende Frontend-Entwickler haben ihre Vorverarbeitungszähne durch das Schreiben ihrer eigenen Mixins geschnitten. Rems auch; Durch die Eingabe des gewünschten Pixelwerts in diesem Mixin von Chris Coyier können Sie ebenso einfach Rems mit Fallback-Pixeln ausgeben lassen.
Hier ist das Mixin. 
Hier ist die Verwendung. 
Hier ist das Ergebnis. Die Liste ist fast endlos, aber wenn Sie irgendwelche Mixins haben, die Sie gerne in Ihrer eigenen Arbeit verwenden (zur Ausgabe von Ems und Rems), dann lassen Sie es mich in den Kommentaren wissen und ich füge sie hier hinzu:
Es ist ein breites Thema, es gibt viele Möglichkeiten, aber in die Welt von ems einzutauchen, ist eine der befriedigenderen Herausforderungen in der Front-End-Webentwicklung. Hören Sie auf, Pixel zu denken und beginnen Sie heute, relativ zu denken!
