Heim > Artikel > Web-Frontend > Detailliertes Verständnis der CSS-Schriftarteneinheiten px, em, rem und %

Detailliertes Verständnis der CSS-Schriftarteneinheiten px, em, rem und %

yuliaOriginal: 2018-09-19 14:23:001492Durchsuche

Wenn wir die Seite gestalten, wählen wir normalerweise px als Längeneinheit. Viele Leute sind mit em, rem und anderen Längeneinheiten nicht vertraut. Lassen Sie mich als Nächstes mit Ihnen über die CSS-Schriftarteneinheiten px, em, rem und Prozentsatz sprechen. Freunde in Not können darauf verweisen, ich hoffe, es wird Ihnen hilfreich sein.

Es gibt viele Arten von CSS-Schriftarteneinheiten. Wir stellen hier nur % px, em und rem vor. Relative Längeneinheit. Pixel px sind relativ zur Bildschirmauflösung.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1{
               font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体为20px
       </div>
    </body>
</html>

2. Em ist eine relative Längeneinheit. Relativ zur Schriftgröße im Text des Objekts. Wenn die Schriftgröße des aktuellen Inline-Textes nicht manuell festgelegt wird, entspricht sie der Standardschriftgröße des Browsers.

Die Standardschriftgröße jedes Browsers beträgt 16 Pixel. Alle nicht angepassten Browser-Schriftgrößen entsprechen: 1em = 16px. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im Body-Selektor in CSS Font-size=62,5 % deklarieren, wodurch der em-Wert 16px*62,5%=10px wird, also 12px=1,2em, 10px=1em , auch Das heißt, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann zu em als Einheit wechseln. Die Eigenschaften von

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                /*相对于浏览器的字体大小16px定义，此时浏览器的字体大小为10px，便于以后计算*/
                font-size: 62.5%;
            }
            .div1{
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体2em相当于20px
        </div>
    </body>
</html>

1.em sind nicht festgelegt. Der Wert von 2.em erbt die Schriftgröße des übergeordneten Elements.

3.rem ist eine neue relative Einheit (root em), die von CSS3 eingeführt wurde. Rem hat immer noch eine relative Größe, aber der Wert ist relativ zu HTML. Dadurch können Sie die Größe aller Schriftarten proportional anpassen, indem Sie das Stammelement ändern, und Sie können die Kettenreaktion der zusammengesetzten Schriftgrößen Schicht für Schicht vermeiden

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             .div1{
                 /*相对于HTMl字体*/
                 font-size: 2rem;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体2rem相当于32px
        </div>
    </body>
</html>

Vielen Dank!

Das obige ist der detaillierte Inhalt vonDetailliertes Verständnis der CSS-Schriftarteneinheiten px, em, rem und %. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 html 继承对象选择器

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen Sie allgemeine Grafiken mit der Eigenschaft border-radius in CSS3Nächster Artikel：Erstellen Sie allgemeine Grafiken mit der Eigenschaft border-radius in CSS3

In Verbindung stehende Artikel

Mehr sehen