Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel)
Detaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel)
- 不言Original
- 2018-11-07 10:50:134921Durchsuche
Viele Websites verwenden Pixeleinheiten, die sich auf immer mehr verschiedenen Geräten nur schwer anpassen lassen. CSS3 führt einige neue Einheiten ein, darunter REM-Einheiten, die für „root em“ stehen. Es geht um die Verwendung von REM.
Wie nutzen wir also REM?
Angenommen, wir haben dieses CSS:
CSS
article h2 {font-size:20px;}
article p {font-size:12px;}Zuerst müssen wir die px-Größe relativ zu allen Schriftarten bestimmen. Der Einfachheit halber habe ich die Stammschriftgröße am besten wie folgt auf 1 Pixel festgelegt:
CSS
html {font-size:1px;}Zweitens müssen wir die restlichen Werte für die Schriftgröße ändern aus Pixel werden durch rem-Einheiten ersetzt.
CSS
article h2 {font-size:20rem;}
article p {font-size:12rem;}REM macht, was es tut, nimmt 20REM und multipliziert es mit dem Wurzelelement:
20 REM * 1 PX = 20PX.
Browser-Unterstützung
IE7 und IE8 müssen weiterhin PX-Werte verwenden. Dadurch werden wir gezwungen, die Schriftgröße zweimal zu schreiben, einmal in PX und ein zweites Mal in REM.
CSS
article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}Das Beispiel ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html{font-size:1px;}
article h2{
font-size:20px;/*Support IE7 & IE8*/
font-size:20rem;
}
article p{
font-size:12px;/*Support IE7 & IE8*/
font-size:12rem;
}
</style>
</head>
<body>
<section>
<article>
<h2>php中文网</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2>php中文网1</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2>php中文网2</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
</section>
</body>
</html>Der Effekt ist wie folgt:
REM hat Was sind die Vorteile?
Nehmen wir an, wir müssen alle Schriftarten auf der Website um 20 % vergrößern. Alles, was wir tun müssen, ist, die Schriftgröße im Stammelement wie folgt zu ändern:
html {font-size:1.2px;}Wenn Sie die Schriftgröße um 20 % reduzieren möchten, gehen Sie folgendermaßen vor:
html{font-size:0.8px;}REM für responsives Design Klicken Sie hier, um alle Schriftgrößen zu ändern. Das ist einfacher. Siehe Beispiel:
@media (min-width: 320px){
html{
font-size:1.4px;
}}
@media (min-width: 600px){
html{
font-size:1.2px;
}} Jetzt können wir auf kleineren Bildschirmen alle Schriftarten um 40 % vergrößern und auf mittelgroßen Bildschirmen um 20 %.
Verwenden Sie less, um Inhalte nicht mehr zweimal schreiben zu müssen – zur Unterstützung alter Browser
In less oder sass können Sie Funktionen hinzufügen, die Ihnen das ständige doppelte Schreiben ersparen .
Sie können die Funktion zur Reduzierung der Schriftgröße verwenden und sie.font-size(@font-size) {
font-size : @font-size * 1px;
font-size : @font-size * 1rem;
}
article h2 {
.font-size(20);
} nennen.Das kompilierte CSS sieht folgendermaßen aus: article h2{
font-size:20px;
/*Support IE7 & IE8*/
font-size:20rem;
}Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!