Detailliertes Verständnis der CSS-Schriftarteneinheiten px, em, rem und %-CSS-Tutorial-php.cn

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

yulia

Freigeben： 2018-09-19 14:23:00

Original

1488 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!