Einführung in die Verwendung von em im elastischen Layout in CSS3: Wie viele Pixel sind 1em?

Ich verwende CSS schon seit langer Zeit, habe jedoch immer „px“ verwendet, um die relevanten Attribute von Web-Elementen festzulegen, und habe mich nie getraut, „em“ zu verwenden. Der Hauptgrund ist, dass ich nicht viel darüber weiß. Ich kenne das Konzept nur ein bisschen. Vor einiger Zeit musste ich „em“ als Einheit verwenden, um Elemente in einem Projekt festzulegen, also habe ich „em“ von Grund auf gelernt. Nachdem ich nun ein wenig Verständnis dafür habe, habe ich speziell einen Blog-Beitrag zusammengestellt, den ich heute mit Ihnen teilen möchte, in der Hoffnung, dass er den Jungs eine gewisse Hilfe sein wird.

Dieses Tutorial zeigt Ihnen Schritt für Schritt, wie Sie mit „em“ ein grundlegendes flexibles Layout erstellen, sodass Sie lernen, wie man es berechnet. Wie verwende ich „em“, um die Schichten elastisch auszudehnen? Wie erweitern Sie Inhalte wie Texte und Bilder? Beginnen wir unsere heutige „em“-Reise mit diesen Fragen.

Was ist elastisches Layout?

Benutzerdefinierte Textgröße und flexibles Layout

Die vom Browser des Benutzers gerenderte Standardtextgröße beträgt „16px“. Mit anderen Worten: Die Standardtextgröße des „Body“ einer Webseite beträgt im Browser des Benutzers „16px“. Natürlich kann der Benutzer die Schriftgrößeneinstellung ändern, wenn er möchte. Der Benutzer kann die Standardschriftgröße des Browsers über die Benutzeroberflächensteuerung ändern.

Ein wichtiger Aspekt des flexiblen Designs besteht darin, dass alle Elemente auf einer Webseite „em“-Einheitenwerte verwenden. „em“ ist eine relative Größe. Wir können sie auf 1em, 0,5em, 1,5em usw. einstellen. „em“ kann auch auf drei Dezimalstellen genau angegeben werden, z. B. „1,365em“. Das Wort „relativ“ bedeutet:

1. Relative Berechnungen müssen über eine Referenz verfügen. „relativ“ bezieht sich hier also auf die Schriftgröße im Verhältnis zum übergeordneten Element des Elements. Wenn Sie beispielsweise die Schriftgröße eines <div> auf „16px“ festlegen, erben die untergeordneten Elemente dieses <div> dessen Schriftgröße, sofern Sie sie in seinen untergeordneten Elementen nicht explizit erneut festlegen. Wenn Sie an dieser Stelle die Schriftgröße des untergeordneten Elements auf „0,75em“ einstellen, wird die Schriftgröße als „0,75 x 16px = 12px“ berechnet.

2. Wenn der Benutzer die Textgröße über die Benutzeroberflächensteuerung des Browsers ändert, wird auch unsere gesamte Seite vergrößert (oder verkleinert), sodass die gesamte Seite nicht abstürzt, wenn der Benutzer die Browserschriftart ändert (ich glaube, jeder ist schon einmal auf dieses Phänomen gestoßen. Wenn Sie es nicht glauben, probieren Sie es in Ihren Projekten aus, Sie werden es erschreckend finden).

Sie können sich dieses Beispiel für ein flexibles Layout ansehen. Wenn Sie zu diesem Zeitpunkt die Benutzeroberflächen-Steuerelemente des Browsers zum Ändern der Textgröße verwenden oder direkt „Strg +“ und „Strg -“ verwenden, werden Sie in diesem Beispiel für ein elastisches Layout feststellen, dass der Browser bei einer Änderung der Schriftgröße diese entsprechend vergrößert oder verkleinert, ohne das Layout der gesamten Seite zu beeinträchtigen. Hinweis: Das gesamte HTML und CSS für dieses Beispiel wird im gesamten Tutorial verwendet.

Weitere Beispiele für flexible Layouts finden Sie in „Simplebites“ von Dan Cederholm. Dort können Sie die Textgröße zum Durchsuchen ändern.

Haben Sie nach dem Ausprobieren das Gefühl, dass die Seite mit elastischem Layout sehr flexibel und so präzise wie „px“ ist? Solange wir also die grundlegende Beziehung zwischen „Schriftgröße“, „px“ und „em“ beherrschen, können wir mit CSS schnell präzise Layouts erstellen.

Elastigirl von CSS stellt EM vor

Elastigirls „em“ ist extrem leistungsstark und flexibel, die Schriftgröße spielt keine Rolle, ob 12px, 16 oder 60, es kann seinen Wert berechnen.

em ist eigentlich eine Satztesteinheit, und es gibt eine kurze Geschichte über ihren Ursprung. Ich werde Ihnen diese Geschichte nicht erzählen, weil Sie nicht hier sind, um meine Geschichte zu hören. Ich denke, die meisten Leute würden gerne mehr darüber in CSS erfahren.

In CSS ist ein „em“ eigentlich eine vertikale Maßeinheit. Ein Geviert entspricht dem vertikalen Platz, den ein Buchstabe in einer beliebigen Schriftart einnimmt, und hat nichts mit dem horizontalen Platz zu tun, den er einnimmt. Daher gilt:

Wenn die Schriftgröße 16px beträgt, dann ist 1em = 16px.

Erste Schritte

Bevor wir beginnen, das „em“ in CSS zu verstehen, müssen wir die Standardschriftgröße im Browser kennen. Wie bereits erwähnt beträgt die Standardschriftgröße in allen modernen Browsern „16px“. Die Standardeinstellungen im Browser lauten also:

1em = 16px

Wenn also ein CSS-Selektor geschrieben wird, hat der Browser eine Standardschriftgröße von „16px“. An diesem Punkt erbt der <body> auf unserer Webseite diese „font-size:16px;“, es sei denn, Sie legen den „font-size“-Wert von <body> im CSS-Stil explizit fest, um den geerbten Wert zu ändern. Auf diese Weise ergibt sich „1em = 16px“, „0,5em = 8px“, „10em = 160px“ usw. Wir können „em“ auch verwenden, um die Größe eines beliebigen Elements anzugeben.

Legen Sie die Schriftgröße des Textkörpers fest

Viele Vorgänger haben eine Erfahrung aus jahrelanger Praxis mitgebracht. Sie schlagen vor, dass wir die für den Haupttext erforderliche Schriftgröße im <body> festlegen oder auf „10px“ setzen, was („0,625em oder 62,5%“) entspricht, um die Berechnung seiner untergeordneten Elemente zu erleichtern. Beides ist wünschenswert. Aber wir alle wissen, dass die Standardschriftart von <body> „16px“ ist, und wir wissen auch, dass wir sie neu berechnen und anpassen müssen, wenn wir ihren Standardwert ändern, um sicherzustellen, dass das flexible Layout nicht beschädigt wird. Das perfekte Setup ist also:

Text {Schriftgröße:1em;}

Aber unter dem ungeliebten Internet Explorer wird „em“ ein Problem haben. Beim Anpassen der Schriftgröße wird auch unser elastisches Layout beschädigt. Glücklicherweise gibt es jedoch eine Möglichkeit, dieses Problem zu lösen:

html {Schriftgröße: 100%;}

Formelkonvertierung - PXtoEM

Wenn Sie zum ersten Mal ein flexibles Layout erstellen, halten Sie am besten einen Taschenrechner bereit, da wir zu Beginn viele Berechnungen durchführen müssen und dies Sie beruhigt.

Pixel sind uns zu intim, deshalb fangen wir auch dort an. Zuerst müssen wir das Verhältnis zwischen 1px und em berechnen und dann müssen wir den benötigten px-Wert kennen. Aus der vorherigen Einführung wissen wir alle, dass 1em immer der Schriftgröße des übergeordneten Elements entspricht. Daher können wir es mit der folgenden Formel berechnen:

1 ÷ Schriftgröße des übergeordneten Elements × umzurechnender Pixelwert = em-Wert

Sie können sich auf die folgende Umrechnungstabelle beziehen (Werte, wenn die Textschriftart 16px beträgt)

Als nächstes schauen wir uns ein sehr einfaches Beispiel für die „Verwendung von CSS EM zum Erstellen eines 960 Pixel breiten elastischen Layouts“ an.

<Text>

<div id="container"> …</div>

</body>

Konvertieren Sie 960px in em

1 ÷ 16px × 960px = 60em

Voraussetzung für diesen berechneten Wert ist „font-size:16px“ von <body>.

html {Schriftgröße: 100%;}
Körper {
Schriftgröße: 1em;
}
#Behälter {
Breite: 60em;
}

Ich denke, dass jeder es anhand der obigen Beispiele besser verstehen kann, da es Beispiele gibt, die man konsultieren kann. Tatsächlich können wir die obige Berechnungsformel umwandeln, um Ihre Berechnung bequemer zu gestalten:

Zu konvertierender Pixelwert ÷ Schriftgröße des übergeordneten Elements = em-Wert

Dann kann unser Beispiel "960px" oben wie folgt in einen "em"-Wert umgewandelt werden

960px ÷ 16px = 60em

Oben haben wir die Berechnungsmethode zur Konvertierung von „px“ in „em“ gesehen. Als Nächstes schauen wir uns das oben gezeigte Beispiel für ein elastisches Layout an. Als nächstes werden wir es Schritt für Schritt umsetzen.

Einen widerstandsfähigen Container bauen

Um einen Zentrierungseffekt wie im Beispiel des elastischen Layouts zu erzielen, müssen wir zunächst eine HTML-Struktur erstellen. Ich werde ein <div> erstellen und es "wrap" nennen.

<Text>
<div id="wrap"> Inhalt hier</div>
</body>

Wir möchten, dass dieser Container 740 Pixel breit ist, passend für eine Instanz eines 800 x 600 Pixel großen Displays. Wie viele „em“s wären also „740px“? Das ist es, was uns wichtig sein muss. Schauen wir uns das gemeinsam an:

1. Konvertieren Sie „740px“ in „em“ und setzen Sie es in unseren Container „div#wrap“: Wir alle wissen, dass das übergeordnete Element <body> von „div#wrap“ die Schriftart auf „16px“ setzt. Wenn zu diesem Zeitpunkt keine anderen Anzeigeeinstellungen vorgenommen werden, erbt sein untergeordnetes Element <div id="wrap"> den Wert „font-size“, sodass wir leicht Folgendes erhalten: „die Beziehung zwischen 1px und 1em“

1em = 16px, das heißt, 1px = 1 ÷ 16 = 0,0625em

Auf diese Weise können unsere "740px" leicht in "em" umgewandelt werden.

0,0625em × 740 = 46,25em

Damit du ein besseres Bild vor Augen hast und dir nicht so schnell Fehler unterlaufen, kannst du natürlich auch nach unserer oben aufgeführten Berechnungsformel umrechnen:

1 ÷ 16 × 740 = 46,25em (1 ÷ Schriftgröße des übergeordneten Elements × zu konvertierender Pixelwert = em-Wert)

Auf diese Weise können Sie die obige Formel verwenden, um den „em“-Wert für jede gewünschte Breite oder Höhe zu berechnen. Sie müssen lediglich wissen, „1px entspricht wie vielen ems“ und den „px“-Wert, den Sie umrechnen möchten. Mit diesen Parametern können Sie den gewünschten „em“-Wert erhalten.

2. CSS-Stile erstellen: Jetzt können wir Stile für „div#wrap“ schreiben. Das Beispiel für das elastische Layout zeigt uns deutlich, dass wir eine Breite von „740px“ für „div#wrap“ festlegen, damit es zentriert ist, mit oberen und unteren „Rändern“ von „24px“ und einem Rahmeneffekt von „1px“. Also berechnen wir zuerst den entsprechenden „em-Wert“ gemäß der obigen Formel und schreiben ihn dann in den CSS-Stil:

html {Schriftgröße: 100%;}
Textkörper {Schriftgröße: 1em;}
#wickeln {
Breite: 46,25em;/*740px ÷ 16 = 46,25em */
Rand: 1,5em automatisch;/*24px ÷ 16 = 1,5em*/
Rand: 0,0625em durchgezogen #ccc;/*1px ÷ 16 = 0,0625em*/
}

Jetzt können wir ganz einfach einen flexiblen Container mit Inhalt erstellen: Beispiel für ein flexibles Layout.

Textstile und Ems

Zuerst fügen wir ein <h1> und ein <p> in das zuvor erstellte <div id="wrap"></div> ein:

<div id="wrap">
<h1>...</h1>
<p>...</p>
</div>

Im Beispiel für das flexible Layout haben wir „18px“ für den Titel verwendet, für den Absatz wurde die Schriftart „12px“ eingestellt und die Zeilenhöhe betrug „18px“. 18px ist für uns ein wichtiger Wert, um ein flexibles Layout zu erreichen, und wir können sie für proportionale Änderungen verwenden. (Für eine Einführung in die Typografie von Titeln und Absätzen können Sie bei Interesse auf Richard Rutters „Grundlegender Zeilenabstand und vertikaler Rhythmus“ und das Kapitel zur vertikalen Bewegung klicken.)

Gemäß der CSS-Vererbung haben wir die Schriftgröße im Inhaltscontainer von „div#wrap“ nicht explizit festgelegt, sodass das gesamte „div#wrap“ die Schriftgröße seines übergeordneten Elements „body“ – „16px“ – erbt.

1. Legen Sie den Absatzstil fest: - Schriftart „12px“, Zeilenhöhe „18px“ und Randwert

Aus der CSS-Vererbung können wir erkennen, dass alle unsere Absätze die „font-size:16px“ des übergeordneten Elements „div#wrap“ erben. Gleichzeitig wissen wir aus der vorherigen Einführung, dass 1px = 1 ÷ 16 = 0,0625em ist. Daher können wir leicht herausfinden, wie viele „em“ „12px“ entsprechen.

0,0625em × 12 = 0,750em

So können wir den Stil für Absatz p festlegen:

p {Schriftgröße: 0,75em;/*0,0625em × 12 = 0,750em */}

Um die erforderliche Zeilenhöhe und den „Rand“ von „18px“ für einen Absatz zu berechnen, der dem grundlegenden Zeilenabstand von Richard Rutter entspricht, müssen wir Folgendes tun:

18 ÷ 12 = 1,5em

Teilen Sie einfach den gewünschten Zeilenhöhenwert von „18px“ durch die „Schriftgröße 12px“, um den „Zeilenhöhenwert“ für den Absatz „p“ zu erhalten. In diesem Beispiel entspricht die Zeilenhöhe dem "1,5"-fachen der Schriftgröße. Dann fügen wir dem Absatz "p" die Stile "line-height" und "margin" hinzu.

P{
Schriftgröße: 0,75em;/*0,625em × 12 = 0,750em */
Zeilenhöhe: 1,5em;/*18px(Zeilenhöhe) ÷ 12(Schriftgröße) = 1,5em */
Rand: 1,5em;/*18px(Rand) ÷ 12(Schriftgröße) = 1,5em */
}

2. Stellen Sie für den Titel eine Schriftgröße von 18px ein

Der Titel „h1“ ist derselbe wie der Absatz „p“. Er erbt auch die „Schriftgröße“ von „16px“ seines übergeordneten Elements „div#wrap“, sodass wir sein „em“ auf die gleiche Weise berechnen können.

0,0625em × 18 = 1,125em

Den resultierenden Wert können wir in das CSS-Stylesheet schreiben

h1 {
Schriftgröße: 1,125em;/*0,625em × 18 = 1,125em*/
}

Um den von Richard Rutter erwähnten vertikalen Rhythmus beizubehalten, haben wir mit der zuvor beschriebenen Methode auch die „Zeilenhöhe“ und den „Rand“ des Titels „h1“ auf „18px“ gesetzt. Es ist einfach, ihren „em“-Wert auf „1em“ zu bringen:

h1 {
Schriftgröße: 1,125em; /*0,625em × 18 = 1,125em*/
Zeilenhöhe: 1em; /*18px(Zeilenhöhe) ÷ 18px(Schriftgröße) = 1em */
Rand: 1em; /*18px(Rand) ÷ 18px(Schriftgröße) = 1em */
}

Bildgröße einstellen – mit em

Um dasselbe Ergebnis wie im Beispiel mit dem elastischen Layout zu erzielen, müssen wir auch ein Bild in das HTML einfügen:

<Text>
<div id="wrap">
	<h1>...</h1>
	<p><img src="90.png" alt="" /> Lorem...</p>
</div>
</body>

Unser Bild hat eine Breite und Höhe von „90px“, einen rechten und einen unteren Rand von „18px“ und ist außerdem linksschwebend. Schauen wir uns an, wie sich diese Stileffekte bei Bildern erzielen lassen:

Aus der HTML-Struktur wissen wir eindeutig, dass das Bild ein untergeordnetes Element des Absatzes „p“ ist. Aus der vorherigen Einführung wissen Sie, dass der „Schriftgrößen“-Wert dieses Absatzes „p“ als „12px“ definiert ist. Wenn wir daher den Attributwert des Bildes berechnen, können wir ihn nicht gemäß „1px = 0,0625em“ oder „1em=16px“ berechnen. Wir müssen die älteste Formel verwenden:

1 ÷ Schriftgröße des übergeordneten Elements × umzurechnender Pixelwert = em-Wert

Auf diese Weise können wir gemäß der oben gezeigten Formel die Größe des Bildes berechnen:

1 ÷ 12 × 90 = 7,5em

Nun kannst Du den berechneten Wert in Dein Stylesheet schreiben:

p img {
Breite: 7,5em; /*1 ÷ 12 (Schriftgröße des übergeordneten Elements) × 90px (Bildbreite) = 7,5em */
Höhe: 7,5em; /*1 ÷ 12 (Schriftgröße des übergeordneten Elements) × 90px (Bildhöhe) = 7,5em */
}

Wir wissen, dass „18px“ im Absatz genau „1,5em“ ist, und verwenden es jetzt auch im Bildstil:

p img {
Breite: 7,5em; /*1 ÷ 12 (Schriftgröße des übergeordneten Elements) × 90px (Bildbreite) = 7,5em */
Höhe: 7,5em; /*1 ÷ 12 (Schriftgröße des übergeordneten Elements) × 90px (Bildhöhe) = 7,5em */
Rand: 0 1,5em 1,5em 0;
schweben: links;
}
		

Auf diese Weise können wir einen ähnlichen Effekt wie im Beispiel des elastischen Layouts erzielen. Ich hoffe, dieses Beispiel hilft Ihnen zu verstehen, wie Sie mit „em“ ein flexibles Layout erstellen. Natürlich sind Sie möglicherweise immer noch besorgt, dass die Verwendung von „em“ zum Erstellen eines flexiblen Layouts nicht so präzise ist wie „px“. Wenn Sie dieses Tutorial wirklich verstehen, werden Sie diese Vorstellung, denke ich, nicht mehr haben.

Formelübersicht des elastischen Layouts

Abschließend denke ich, dass jeder die gleiche Idee wie ich haben wird, nämlich wie man den „px“-Wert des relevanten Parameters erfolgreich und korrekt in den „em“-Wert umwandelt. Nach der obigen Untersuchung habe ich die Formel schließlich zusammengefasst:

Wenn das Element selbst die Schriftgröße nicht festlegt, werden Breite, Höhe, Zeilenhöhe, Rand, Polsterung, Rahmen und andere Werte des Elements nach der folgenden Formel konvertiert:

1 ÷ Schriftgröße des übergeordneten Elements × umzurechnender Pixelwert = em-Wert

Schauen wir uns ein Beispiel an:

<Text>
<div id="wrapper">Test</div>
</body>

Die Standardschriftgröße im Body beträgt „16px“, daher lauten die relevanten Parameterwerte von „div#wrapper“:

#Wrapper {
Breite: 200px;
Höhe: 100px;
Rand: 5px durchgehend rot;
Rand: 15px;
Polsterung: 10px;
Zeilenhöhe: 18px;
}

Anschließend konvertieren wir die Parameter nach obiger Formel:

#Wrapper {
Breite: 12,5em;/*1 ÷ 16 × 200 = 12,5em-Wert*/
Höhe: 6,25em;/*1 ÷ 16 × 100 = 6,25em-Wert*/
Rand: 0,3125em durchgehend rot;/*1 ÷ 16 × 5 = 0,3125em Wert*/
Rand: 0,9375em;/*1 ÷ 16 × 15 = 0,9375em-Wert*/
Polsterung: 0,625em;/*1 ÷ 16 × 10 = 0,625em-Wert*/
Zeilenhöhe: 1,125em;/*1 ÷ 16 × 18 = 1,125em-Wert*/
}

Schauen wir uns die berechneten Werte an:

Als nächstes müssen Sie sich einen Effekt ansehen. Das ist sehr wichtig. Schauen Sie genau hin. Fügen Sie auf der Grundlage derselben Parameter ein kleines Element hinzu, um die Schriftgröße auf 14px einzustellen. Sie werden vielleicht sagen, das ist ganz einfach. Berechnen Sie es einfach nach der vorherigen Formel und fügen Sie es hinzu. Dann werde ich es gemäß Ihren Angaben berechnen und hinzufügen:

#Wrapper {
Schriftgröße: 0,875em;/*1 ÷ 16 × 14 = 0,875em-Wert*/
Breite: 12,5em;/*1 ÷ 16 × 200 = 12,5em-Wert*/
Höhe: 6,25em;/*1 ÷ 16 × 100 = 6,25em-Wert*/
Rand: 0,3125em durchgehend rot;/*1 ÷ 16 × 5 = 0,3125em Wert*/
Rand: 0,9375em;/*1 ÷ 16 × 15 = 0,9375em-Wert*/
Polsterung: 0,625em;/*1 ÷ 16 × 10 = 0,625em-Wert*/
Zeilenhöhe: 1,125em;/*1 ÷ 16 × 18 = 1,125em Wert*/
}

Schauen wir uns nun den berechneten Layoutwert unter Firebug an

Um das Problem besser zu veranschaulichen, habe ich die Werte der Elemente mit und ohne in Firebug festgelegte Schriftgröße berechnet:

Der Hauptzweck meines Screenshots besteht darin, ein Problem zu veranschaulichen. Wenn die Schriftgröße des Elements selbst festgelegt ist, ist die Berechnungsformel nicht mehr dieselbe wie oben beschrieben. Wir müssen einige Änderungen vornehmen:

1. Die Formel zur Berechnung der Schriftart bleibt gleich
1 ÷ Schriftgröße des übergeordneten Elements × umzurechnender Pixelwert = em-Wert
2. Die Berechnungsformeln für andere Attribute müssen geändert werden, um
1 ÷ Schriftgröße des Elements × zu konvertierender Pixelwert = em-Wert. Berechnen wir es also jetzt:

#Wrapper {
Schriftgröße: 0,875em;/*1 ÷ 16 × 14 = 0,875em-Wert*/
Breite: 14,2857em;/*1 ÷ 14 × 200 = 14,2857em Wert*/
Höhe: 7,1429em;/*1 ÷ 14 × 100 = 7,1429em Wert*/
Rand: 0,357em durchgehend rot;/*1 ÷ 14 × 5 = 0,357em Wert*/
Rand: 1,071em;/*1 ÷ 14 × 15 = 1,071em-Wert*/
Polsterung: 0,714em;/*1 ÷ 14 × 10 = 0,714em-Wert*/
Zeilenhöhe: 1,2857em;/*1 ÷ 14 × 18 = 1,2857em Wert*/
}

Schauen wir uns den berechneten Wert an:

Zusammenfassen

Nach einer langen Einführung möchte ich Ihnen nur die folgenden Punkte sagen

1. Die Standardschriftgröße des Browsers beträgt 16px
2. Wenn das Element selbst die Schriftgröße nicht festlegt, können alle Attributwerte des Elements selbst, wie z. B. „Rahmen, Breite, Höhe, Polsterung, Rand, Zeilenhöhe“, nach der folgenden Formel berechnet werden:
1 ÷ Schriftgröße des übergeordneten Elements × umzurechnender Pixelwert = em-Wert
3. Dies müssen Sie langsam verstehen, sonst wird es leicht mit dem zweiten Punkt verwechselt. Wenn für das Element eine Schriftgröße festgelegt ist, wird die Schriftgrößenumrechnung dennoch nach der zweiten Formel berechnet, die wie folgt lautet:
1 ÷ Schriftgröße des übergeordneten Elements × umzuwandelnder Pixelwert = em-Wert. Wenn das Element eine Schriftgröße hat, müssen andere Attribute des Elements wie „Rahmen, Breite, Höhe, Polsterung, Seitenrand, Zeilenhöhe“ nach der folgenden Formel berechnet werden:
1 ÷ eigene Schriftgröße des Elements × umzuwandelnder Pixelwert = em-Wert. Ich weiß nicht, ob du das so verstehst. Wenn nicht, kannst du dir das obige Beispiel noch einmal ansehen.

Einführung und Konvertierungsmethode von em und px in CSS

Was ist sie?

„em“ bezieht sich auf die Schrifthöhe und die Standardschrifthöhe jedes Browsers beträgt 16px. Daher gilt für alle nicht angepassten Browser: 1em=16px. Dann 12px=0,75em, 10px=0,625em. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im Body-Selektor in CSS Font-size=62.5% deklarieren. Dadurch ändert sich der em-Wert in 16px*62.5%=10px, also 12px=1.2em, 10px=1em. Mit anderen Worten, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann em als Einheit verwenden.
em hat die folgenden Eigenschaften:
1. Der Wert von em ist nicht festgelegt;
2. em erbt die Schriftgröße des übergeordneten Elements.

Schritte zum Umschreiben:

1. Deklarieren Sie im Body-Selektor die Schriftgröße „Font-size=62.5%“.
2. Teilen Sie Ihren ursprünglichen px-Wert durch 10 und verwenden Sie dann em als Einheit.
Es ist ganz einfach, oder? Wenn das Problem mit nur den beiden oben genannten Schritten gelöst werden könnte, würde niemand px verwenden. Nach den beiden oben genannten Schritten werden Sie feststellen, dass die Schriftarten auf Ihrer Website größer sind, als Sie gedacht haben. Da der Wert von „em“ nicht festgelegt ist und die Größe des übergeordneten Elements übernimmt, können Sie die Schriftgröße im Inhalts-Div auf 1,2em (also 12 Pixel) festlegen. Anschließend setzt man die Schriftgröße des Selektors p auf 1,2em, aber wenn p ein untergeordnetes Element des Inhalts ist, beträgt die Schriftgröße von p nicht 12px, sondern 1,2em = 1,2 * 12px = 14,4px. Dies liegt daran, dass die Schriftgröße des Inhalts auf 1,2 em eingestellt ist. Dieser em-Wert erbt die Größe des übergeordneten Elementkörpers, die 16px * 62,5 % * 1,2 = 12px beträgt. Da p sein untergeordnetes Element ist, erbt em die Schrifthöhe des Inhalts, die 12px beträgt. 1,2em von p sind also nicht mehr 12px, sondern 14,4px.
3. Berechnen Sie die Em-Werte der vergrößerten Schriftarten neu. Vermeiden Sie wiederholte Angaben zur Schriftgröße, d. h. das oben erwähnte Phänomen von 1,2 * 1,2 = 1,44. Wenn Sie beispielsweise die Schriftgröße in #content als 1,2em deklarieren, kann die Schriftgröße von p beim Deklarieren nur 1em und nicht 1,2em sein, da dieses em nicht jenes em ist. Es erbt die Schrifthöhe von #content und wird zu 1em = 12px.