Detaillierte Erläuterung der REM-Nutzung in CSS3-CSS-Tutorial-php.cn

Detaillierte Erläuterung der REM-Nutzung in CSS3

黄舟

Freigeben： 2016-12-23 15:32:22

Original

1399 Leute haben es durchsucht

Legen Sie die Schriftart auf der Seite fest. Wir wissen, dass es zwei gängige Schriftarten gibt: px und em.

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

Normalerweise wird die Schriftgröße des Textes als Grundlage verwendet

Gemeinsame 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 ? */
}

Nach dem Login kopieren

Warum ist es ein Fragezeichen, ob das „1.4em“ von „li“ „14px“ ist? 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“. , rem ist relativ zum Wurzelelement.

Wir müssen lediglich einen Referenzwert im Stammelement ermitteln und die Schriftgröße im Stammelement festlegen. Dies kann auch ganz nach Ihren eigenen Bedürfnissen erfolgen:

pxtoem

Studenten, denen die Konvertierung Schwierigkeiten bereitet, können auch die Website http://pxtoem.com/ besuchen, um

Gemeinsames Schreiben einzurichten:

ist im Stammelement definiert. Eine grundlegende Schriftgröße beträgt 62,5 % (also 10 Pixel. Das Festlegen dieses Werts dient hauptsächlich der Erleichterung der Berechnung. Wenn er nicht festgelegt ist, basiert er auf „16 Pixel“). 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*/
}

Nach dem Login kopieren

Hinweis: Unter Chrome ist die Standardschriftart unten 12 Pixel, Sie können die Schriftgröße auf 625 % usw. für andere einstellen

Oben finden Sie eine detaillierte Erläuterung der Verwendung von REM in CSS3, mehr Für verwandte Inhalte achten Sie bitte auf die chinesische PHP-Website (m.sbmmt.com)!