Detaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel)-CSS-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel)

不言

Freigeben： 2018-11-07 10:50:13

Original

4943 Leute haben es durchsucht

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;}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

REM macht, was es tut, nimmt 20REM und multipliziert es mit dem Wurzelelement:

20 REM  *  1 PX = 20PX.

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Detaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel)

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;}

Nach dem Login kopieren

Wenn Sie die Schriftgröße um 20 % reduzieren möchten, gehen Sie folgendermaßen vor:

html{font-size:0.8px;}

Nach dem Login kopieren

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;
    }}

Nach dem Login kopieren

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);
  }

Nach dem Login kopieren

nennen.

Das kompilierte CSS sieht folgendermaßen aus:

article h2{
  font-size:20px;
  /*Support IE7 & IE8*/
  font-size:20rem;
  }

Nach dem Login kopieren

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!