Teilen von Anwendungsfällen relativer REM-Einheiten

Dieses Mal werde ich Ihnen die Anwendungsfälle von relativen REM-Einheiten mitteilen. Was sind die Vorsichtsmaßnahmen für die Verwendung von relativen REM-Einheiten? Das Folgende ist ein praktischer Fall.

rem (Schriftgröße des Stammelements) bezieht sich auf die Einheit der Schriftgröße relativ zum Stammelement. Einfach ausgedrückt handelt es sich um eine relative Einheit. Wenn Sie rem sehen, werden Sie definitiv an die Einheit em denken. Em (Schriftgröße des Elements) bezieht sich auf die Einheit der Schriftgröße relativ zum übergeordneten Element. Sie sind tatsächlich sehr ähnlich, mit der Ausnahme, dass eine Berechnungsregel für die Berechnung auf dem Stammelement und die andere auf dem übergeordneten Element basiert.

Wie oben erwähnt, wird rem über das Root-Element angepasst. Das Root-Element in der Webseite bezieht sich auf HTMLWir legen die Schriftgröße von HTML fest Sie können beispielsweise die Größe von rem , steuern.

<span style="font-size: 14px;">html{<br>    font-size:20px;<br>}<br>.btn {<br>    width: 6rem;<br>    height: 3rem;<br>    line-height: 3rem;<br>    font-size: 1.2rem;<br>    display: inline-block;<br>    background: #06c;<br>    color: #fff;<br>    border-radius: .5rem;<br>    text-decoration: none;<br>    text-align: center;    <br>}</span>

Wir steuern die Schriftgröße unserer Dom-Elemente, indem wir die Schriftgröße in HTML ändern.

Um sich an die Kompatibilität verschiedener Auflösungen anzupassen, kann die Schriftgröße in HTML dynamisch über js generiert werden. Wir können sie auch über eine Medienabfrage für Mainstream-Modelle festlegen. Hier ist zum Beispiel der Code unten. Wenn Sie nicht viel über Medienabfragen wissen, können Sie http://www.w3cplus.com/content/css3-media-queries

<span style="font-size: 14px;">html{font-size: 20px;}<br>@media only screen and (min-width: 320px){<br>    html{font-size: 20px !important;}<br>}<br>@media only screen and (min-width: 350px){<br>    html{font-size: 22.5px !important;}<br>}<br>@media only screen and (min-width: 365px){<br>    html{font-size: 23px !important;}<br>}<br>@media only screen and (min-width: 375px){<br>    html{font-size: 23.5px !important;}<br>}<br>@media only screen and (min-width: 390px){<br>    html{font-size: 24.5px !important;}<br>}<br>@media only screen and (min-width: 400px){<br>    html{font-size: 25px !important;}<br>}<br>@media only screen and (min-width: 428px){<br>    html{font-size: 26.8px !important;}<br>}<br>@media only screen and (min-width: 432px){<br>    html{font-size: 27.4px !important;}<br>}<br>@media only screen and (min-width: 481px){<br>    html{font-size: 30px !important;}<br>}<br>@media only screen and (min-width: 569px){<br>    html{font-size: 35px !important;}<br>}<br>@media only screen and (min-width: 641px){<br>    html{font-size: 40px !important;}<br>}</span>

lernen Natürlich sehen wir beim Festlegen von HTML bei Verwendung der Schriftgröße möglicherweise auch diese Schreibmethode: HTML { Schriftgröße: 62,5 % }. Dies dient hauptsächlich dazu, die Konvertierung zwischen em und px zu erleichtern. Wenn dies der Fall ist, ist dies natürlich 1,2em = 19,2px, aber wir sehen selten die Größe, die durch dargestellt wird 19,2px beim Festlegen, das heißt, wenn px zum Ausdrücken der Größe verwendet wird, hat der Wert keine Dezimalstellen. Wenn body{font-size: festgelegt ist 62,5%;}, 1em = 16px*62,5% = 10px, 1,2em = 12px, ist das nicht viel einfacher und genauer~~.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Häufig verwendete -Code-Organisationszusammenfassung

H5+Canvas-Anwendungsfälle Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonTeilen von Anwendungsfällen relativer REM-Einheiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!