Einführung in die Verwendung von REM in CSS3

Um Schriftarten auf der Seite festzulegen, wissen wir, dass es zwei gängige Schriftarten gibt: px und em.

px

Bei der Webseitenproduktion verwenden wir im Allgemeinen „px“, um unsere Schriftarten festzulegen Text, weil er stabiler und präziser ist. Bei dieser Methode gibt es jedoch ein Problem. Wenn der Benutzer die von uns erstellte Webseite im Browser durchsucht, ändert er die Schriftgröße des Browsers (obwohl die meisten Benutzer die Schriftgröße des Browsers nicht ändern). wird unsere Webseite verwenden Seitenlayout war kaputt, und dann wurde vorgeschlagen, „em“ zu verwenden, um die Schriftart der Webseite zu definieren.

em

basiert im Allgemeinen auf der Schriftgröße des Körpers

Häufig verwendete Schreibmethoden:

body {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
    font-size: 2.4em;
    /*2.4em × 10 = 24px */
}
p {
    font-size: 1.4em;
    /*1.4em × 10 = 14px */
}
li {
    font-size: 1.4em;
    /*1.4 × ? = 14px ? */
}

Warum „ li“ „Ob „1.4em“ gleich „14px“ ist, wird ein Fragezeichen sein? Wenn Sie „em“ als Einheit verwenden, müssen Sie die Einstellungen des übergeordneten Elements kennen, da „em“ ein relativer Wert und ein relativer Wert zum übergeordneten Element ist

Berechnungsformel: 1 ÷ Schriftgröße des übergeordneten Elements Sie sind sich über den Wert nicht sicher. Um das Problem zu lösen, kennen Sie entweder den Wert des übergeordneten Elements oder verwenden Sie „1em“ in einem beliebigen untergeordneten Element.

rem

rem: Die Beschreibung der offiziellen W3C-Website lautet „Schriftgröße des Stammelements“, dh rem ist relativ zum Stammelement.

Wir müssen lediglich einen Referenzwert im Stammelement ermitteln und die Schriftgröße im Stammelement festlegen. Dies kann vollständig auf Ihre eigenen Bedürfnisse abgestimmt werden.

Übliche Schreibmethode:

definiert eine Grundschriftgröße von 62,5 % (d. h. 10 Pixel) im Stammelement, wenn dies der Fall ist nicht festgelegt, es basiert auf „16px“ ist der Maßstab). Aus den obigen Berechnungsergebnissen können wir „rem“ genauso bequem wie „px“ verwenden und gleichzeitig die Differenz zwischen „px“ und „em“ lösen.

html {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
}
h1 {
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
}

Hinweis: Unter Chrome ist die Standardschriftart unten 12 Pixel, Sie können die Schriftgröße auf 625 % usw. festlegen.

Browserkompatibilität

IE9 oder höher Browser, die CSS3 unterstützen, werden es auf jeden Fall unterstützen. Wenn Sie mit niedrigeren Versionen des IE kompatibel sein möchten, können Sie die Verwendung von px für Browser niedrigerer Versionen unter IE9 in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von REM in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!