Entwerfen Sie eine ansprechende Site mit EM-basierten Größengröße

Feb 13, 2026

wie man

Sie haben wahrscheinlich gehört, dass Sie relative Einheiten für die Schriftgröße verwenden sollten. Dies ist eine gute Regel für das zugängliche Webdesign; Wenn der Benutzer die Standardschriftgröße des Browsers ändert, können Sie den Text Ihrer Seite entsprechend ändern. Möglicherweise haben Sie diesen Rat genommen und den Switch gemacht. Vielleicht haben Sie Ihren Rechner ausgerufen und die Schriftgrößen Ihrer Website absolut umgewandelt PX. Einheiten zu EMS oder, wahrscheinlicher, Rems.

Wenn Sie jedoch dort angehalten haben, verpassen Sie viel Flexibilität und Macht, die EMS zum Browser bringen. Die EM-Einheit ist nicht einfach ein Ersatz für das Vertraute PX. ; Sie können es für mehr Eigenschaften verwenden als nur Schriftgröße . Wenn Sie dies tun, beginnen einige der anderen Vorteile aufzukommen.

Durch konsequent mit EMS können Sie Komponenten auf der Seite entwerfen, die automatisch reagieren, falls sich die Schriftgröße ändert. Mit einem klugen Trick für eine ansprechende Schriftgröße können Sie eine gesamte Seite erstellen, die dynamisch auf der Ansichtsfensterbreite des Browsers anpasst. Lassen Sie mich Ihnen zeigen, wie Sie das "relative" Verhalten von EMS nutzen, um Designs zu erstellen, die skalierbar und ansprechend sind.

Schriftgrößeneinheiten

Die Verwendung von EMS für 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 das Verschachtelungselemente tiefer anfangen. Wenn ein Element eine Schriftgröße in EMS hat, hat sein Elternteil eine Schriftgröße in EMS, und sein Elternteil hat noch einen anderen. Sie müssen alle diese Werte multiplizieren, um den tatsächlichen berechneten Wert des untergeordneten Elements zu ermitteln.

Dies bedeutet, dass das Platzieren desselben Moduls in verschiedenen Containern die Bedeutung von em ändern könnte. Das Modul ist unvorhersehbar.

Um dies zu vermeiden, verwenden wir normalerweise eine andere relative Einheit für Schriftgröße: Rems. Ein REM (oder 'root em') basiert nicht auf der geerbten Schriftgröße, sondern auf der Schriftgröße des Wurzelelements der Seite, & lt; HTML & GT; . Dies bedeutet, dass der Wert auf der gesamten Seite gleich ist. Es ist vorhersehbarer als regulärer EMS und oft bevorzugt.

Bau eines Moduls mit EMS

Lassen Sie uns relative Einheiten verwenden, um ein Modul zu erstellen. Wir werden jedoch nicht dem gemeinsamen Ansatz folgen. Anstatt REM für alles zu verwenden, verwenden wir es nur einmal: auf dem obersten Element des Moduls. Dadurch wird eine bekannte Schriftgröße für das Modul hergestellt, anstatt auf einer unvorhersehbaren Kette von EM-Werten im DOM basiert. Es bedeutet, dass wir die Größe des Moduls leicht skalieren können, indem wir einen einzelnen Wert überschreiben.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Verwenden Sie Rems am äußersten Element, um eine bekannte Schriftgröße festzulegen, und verwenden Sie EMS, um basierend auf diesem Wert zu bauen

Nachdem wir diese bekannte Schriftgröße festgelegt haben, können wir im gesamten Modul regelmäßige EMS verwenden. Verwenden Sie es nicht nur für Schriftgrößen auf den Unterelementen, sondern auch für die meisten anderen Eigenschaften, einschließlich Polsterung , Spanne und Randradius .

Wir bauen ein Panel mit einer Überschrift und einem Körper. Das Markup sieht so aus:

 & lt; div class = "Panel" & gt;
  & lt; div class = "Panel-Rubring" & GT;
    & lt; H3 & GT; siehe die Macht von EMS & LT; / h3 & gt;
  & lt; / div & gt;
  & lt; div class = "Panel-Body" & GT;
    Betrachten Sie die Art und Weise, wie Sie relativ nutzen können
    Einheiten zur dynamischen Dimensionierung Ihrer Module.
  & lt; / div & gt;
& lt; / div & gt;

Lassen Sie uns den äußeren Behälter aufstellen. Wir werden die Schriftgröße in einstellen 1rem. um unseren lokalen EM-Wert festzulegen. Wir definieren dann das Randradius mit EMS. Normalerweise verwende ich jedoch gerne PX für Rand, um eine schöne feine Linie zu erhalten.

 .Panel {
  Schriftgröße: 1REM;
  Border: 1px fest # 678;
  Grenzradius: 0.3EM;
  Überlauf versteckt;
}

Als nächstes stilfen Sie die inneren Elemente. Wir werden EMS für die Polsterung verwenden. Dann erhöhen wir die Schriftgröße der Überschrift der Überschrift auf den 1,25-fachen unseren örtlichen EM-Wert, wodurch eine 20px-Computergröße erzeugt wird.

 .Panel-Rubrik {
  Polsterung: 0.6EM 1.2EM;
  Hintergrundfarbe: #cde;
  Grenzboden: 1px fest # 678;
}
.Panel-Rubrik & GT; h3 {
  Schriftgröße: 1,25EM;
  Marge: 0;
  Briefabstand: 0,03 Uhr;
}
panel-körper {
  Polsterung: 0.6EM 1.2EM;
}

Sie können die Polsterwerte anhand ihrer Schriftgröße multiplizieren, um ihre berechneten Werte zu ermitteln (9.6px vertikal und 19.2px horizontal). Wahrheitsgemäß, obwohl es egal ist. Versuchen Sie, nicht mit Pixel-perfekten Messungen festgefahren zu werden. Dies kann sich unbeholfen anfühlen, aber drücken. Je mehr Sie EMS verwenden, desto mehr werden Sie mit ihnen als Einheit in ihrem eigenen Respekt vertraut.

Dynamisch skalieren das Design

Wenn wir auf diese Weise wiederverwendbare Module erstellen, finden wir oft ein paar Variationen. Angenommen, wir wollten eine größere Version erstellen. Wenn wir für alles PX einsetzten, würde dies bedeuten, die Schriftgröße, die Polsterung, den Grenzradius usw. zu erhöhen. Da wir jedoch alles in Bezug auf eine REM-basierte Schriftgröße definiert haben, müssen wir diesen Wert nur ändern, und das gesamte Modul wird antworten:

 .Panel - Große {Schriftgröße: 1.2REM; }

Wir fügen diese Klasse einfach zu einem Panel hinzu, um es größer zu machen: & lt; Div Class = "Panel Panel - groß" & gt; . Dies ändert die lokale Definition eines EM und damit auch den Randradius- und Polsterwechsel sowie die Schriftgröße seiner untergeordneten Elemente. Mit einer einzigen Erklärung haben wir jeden Teil des Moduls geändert.

A panel module, with paddings and border radius defined using ems — Ein Panel-Modul mit mit EMS definierten Paddings und Randradius

Ebenso könnten wir eine kleine Version erstellen:

 .Panel - klein {Schriftgröße: 0.8RM; }

Durch Erdung des Moduls mit einer obersten Schriftgröße in Rems haben wir es stabil gemacht und vorhersehbar gemacht. Wenn Sie alles andere innerhalb der Verwendung von EMS definieren, haben wir alle Komponententeile skalierbar gemacht.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Es ist möglich, die Größe von allem in dem Modul auf einem Wert zu stützen, und ändern Sie diesen Wert, um alles zu skalieren

Dies ist ein starkes Muster. Sie können diesen Ansatz für alles auf Ihrer Seite verwenden, von Dropdown-Menüs bis zu Social-Media-Schaltflächen. Masse das Modul mit einem REM-Wert, verwenden Sie sie, um praktisch alles andere von Paddings, um auf Symbolgrößen zu positionieren.

Es reaktionsschneidern

Schieben wir den Prinzip noch ein Level. Wir haben das Modul (und theoretisch alle anderen Module auf der Seite) mit REMs und EMS erfahren. Dies bedeutet letztendlich, dass ihre Größe auf der Schriftgröße des Wurzelelements basiert. Dann können wir diesen einzelnen Wert anpassen, um die gesamte Seite wiederum zu antworten.

Lassen Sie uns eine andere relative Einheit mitbringen: VH. . Der berechnete Wert dieses Geräts wird von der Bildschirmgröße des Benutzers abgeleitet. Es entspricht 1 Prozent der Breite des Ansichtsfensters. Wenn wir die VH-Einheit verwenden, um die Wurzel-Schriftgröße zu definieren, skaliert es automatisch ansprechend, sans Media-Abfragen. Stellen Sie die Schriftgröße auf der Wurzel auf 2vw. :

 HTML {
  Schriftgröße: 2VW;
}

Leider ist der Effekt ein bisschen zu stark. Auf einem iPhone 6 berechnet dies zum Beispiel auf 5,5 px, was zu klein ist. Ebenso ist es unangemessen groß auf größere Bildschirme. Um den Effekt zu erweichen, können wir CSS verwenden calc () Funktion:

 HTML {
  Schriftgröße: Calc (0.6EM + 1VW);
}

Nun wird die Schriftgröße zum Teil aus einem stabilen Wert und teilweise von einem ansprechenden Wert abgeleitet. Dies ergibt einen viel besseren Effekt. Das 0.6EM. Verhält sich als eine Art minimaler Schriftgröße. Nun skaliert der Wurzel EM fließend von etwa 13px auf einem Smartphone bis 21px auf einem durchschnittlichen Desktop-Bildschirm.

Mit Ihrer Seite besteht aus skalierbaren Modulen, die jeweils auf den REM-Wert gegründet sind, und sie werden auch 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 eine einfache Bearbeitung der Schriftgröße erstellen. Vertrauen Sie den EMS und den Rems, und der Browser kümmert sich um die Arbeit für Sie.

Möglicherweise müssen Sie noch die gelegentliche Medienabfrage hinzufügen, um die Leitungsverpackung und einige andere ansprechende Bedenken hinzufügen. Dieser kleine bisschen Code kombiniert mit einer Gewohnheit, EMS und Rems zu verwenden, bringt Sie dort viel.

Dieser Artikel wurde ursprünglich in vorgestellt Netzmagazin. Ausgabe 288; Kaufen Sie es hier.

Zum Thema passende Artikel:

10 Schreibtricks Jeder Designer sollte wissen
Ein Designerführer für Typografie und Schriftarten
Master-barrierefreie Web-Typografie

Entwerfen Sie eine ansprechende Site mit EM-basierten Größengröße

Schriftgrößeneinheiten

Bau eines Moduls mit EMS

Dynamisch skalieren das Design

Es reaktionsschneidern

wie man - Die beliebtesten Artikel

Stil Eine Seite mit SASS

Fügen Sie UI-Animationen Ihrer Website hinzu

5 Möglichkeiten, die SEO Ihrer Website zu steigern

So verwenden Sie Web-Fonts

Bereiten Sie eine Tafel zum Malen in 3 einfachen Schritten auf

Erstellen Sie ein interaktives Parallaxe-Bild

So fügen Sie FUN-CSS-Hintergründe für Ihre Websites hinzu

Erstellen Sie qualität digitale Kopien Ihrer Kunst

Kategorien