Verstehen und verwenden Sie rem-Einheiten in CSS

Was ist rem

Vielleicht haben Sie das Wort „R.E.M.“ gehört, bevor Sie ein Radio oder einen anderen Musikplayer verwendet haben. In den Augen dieser Band ist dieses Wort die Abkürzung für „schnelle Augenbewegung während des leichten Schlafs“, und in CSS steht rem für „em-Einheit mit dem Wurzelelement als Referenz“. Es wird Sie nicht dazu bringen, Ihre religiösen Überzeugungen aufzugeben oder an den Mann auf dem Mond zu glauben, aber es kann Ihnen helfen, ein harmonisches, glattes Design zu erreichen.

Gemäß der Definition von 1rem in der W3C-Spezifikation:

1rem entspricht dem berechneten Wert der Schriftgröße des Stammelements. Wenn die Schriftgröße des Stammelements explizit angegeben wird, beziehen sich die REM-Einheiten auf den Anfangswert des Attributs.

Das bedeutet, dass 1rem der Schriftgröße des HTML-Elements entspricht (die Schriftgröße des Stammelements beträgt in den meisten Browsern 16 Pixel)

Rem-Einheit vs. Em-Einheit

Verwenden Sie EM-Einheiten. Das Hauptproblem besteht darin, dass sie mit Benutzerelementen verknüpft sind. In diesem Fall können diese Elemente ineinander verschachtelt sein und unerwartete Ergebnisse verursachen. Betrachten wir das folgende Beispiel. Wenn die Textgröße des Stammelements den Standardwert 16 Pixel hat, soll die Schriftgröße aller Listen 12 Pixel betragen:

html { 
  font-size: 100%; 
} 
 
ul { 
  font-size: 0.75em; 
}

Wenn eine Liste in „Unter“ verschachtelt ist Bei einer anderen Liste beträgt die Schriftgröße der inneren Liste 75 % der Schriftgröße der äußeren Liste (also 9 Pixel). Wir können dieses Problem immer noch mit ein paar Codezeilen lösen:

ul ul { 
  font-size: 1em; 
}

Auf diese Weise kann dieses Problem gelöst werden, aber wir müssen immer noch den Elementen besondere Aufmerksamkeit schenken, die tief verschachtelt sind.

Bei der Verwendung von rem-Einheiten werden die Dinge einfacher:

html { 
  font-size: 100%; 
} 
 
ul { 
  font-size: 0.75rem; 
}

Wenn alle Größen auf der Textgröße des Stammelements als Referenz basieren, besteht keine Notwendigkeit, verschachtelte Elemente zu verwenden individuell gestylt.

Verwenden Sie rem-Einheiten, um die Textgröße zu definieren

Jonathan Snook war einer der ersten Entwickler, der rem-Einheiten zur Definition der Textgröße verwendete. Bereits im Mai 2011 veröffentlichte er einen Artikel mit dem Titel „Using rem Artikel „Textgröße definieren“. Wie die meisten CSS-Entwickler musste er eine Reihe von Problemen mit komplexen Layouts in EM-Einheiten lösen.

Zu dieser Zeit hatten ältere Versionen des IE noch einen großen Marktanteil und konnten den durch px definierten Text nicht skalieren. Wie wir jedoch zuvor gesehen haben, vergisst man bei der Verwendung von em-Einheiten leicht die Verschachtelung von Elementen und erhält unerwartete Ergebnisse.

Das größte Problem bei der Verwendung von rem-Einheiten zur Definition der Textgröße besteht darin, dass es etwas schwierig ist, mit diesen Werten zu arbeiten. Schauen wir uns ein Beispiel an. Angenommen, die Textgröße des Stammelements beträgt 16 Pixel. Unsere häufig verwendete Textgröße wird wie folgt in rem umgewandelt:

10px = 0,625rem

12px = 0,75 rem

14px = 0,875rem

16px = 1rem (Basis)

18px = 1,125rem

20px = 1,25rem

24px = 1,5rem

30px = 1,875rem

32px = 2rem

Wie wir sehen können, sind diese Werte sehr umständlich zu berechnen. Daher verwendet Snook eine Methode namens 62.5, um dieses Problem zu lösen. Dies ist jedoch keine Innovation, da sie bereits in em-Einheiten verwendet wurde:

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

Da die rem-Einheit mit dem Wurzelelement verknüpft ist, lautet die verbesserte Lösung von Snook:

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

Bedenkenswert ist, dass einige Browser die Rem-Einheit nicht unterstützen. Der obige Code kann also wie folgt umgeschrieben werden

html { 
    font-size: 62.5%; 
} 
 
body { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 
 
h1 { 
    font-size: 24px; 
    font-size: 2.4rem; 
}

Obwohl diese Lösung die beste zu sein scheint, gibt es immer noch Leute, die diesen Ansatz nicht empfehlen. Harry Roberts hat einen Artikel geschrieben, in dem er einige seiner Erfahrungen mit der Rem-Einheit in der Praxis aufzeichnet. Aus seiner Sicht macht die 62,5 %-Lösung zwar die Berechnung einfacher (da die Schriftgröße in px genau zehnmal größer ist als in rem), sie zwingt Entwickler jedoch dazu, ihre Websites neu zu schreiben. Alle Textgrößen in .

Chris Coyier von CSS-Tricks schlug eine dritte Lösung vor. Seine Lösung nutzt die drei Einheiten, die wir bisher kennengelernt haben, voll aus. Die Längeneinheit des Wurzelelements verwendet weiterhin px, das Modul verwendet rem-Einheiten und die Elemente innerhalb des Moduls verwenden em-Einheiten. Mit dieser Methode kann die Größe des Stammelements leicht manipuliert und das Modul skaliert werden. Die Größe des Inhalts im Modul wird entsprechend der eigenen Textgröße des Moduls skaliert. Louis Lazaris brachte seinen Standpunkt später in „The Power of Em Units in CSS“ zum Ausdruck.

Sie können sehen, wie Chris' Lösung im folgenden Beispiel funktioniert:

Der Code ist auf SitePoint (@SitePoint, klicken Sie zur Vorschau) in CodePens „Using em in CSS“ und rem-Einheiten zu sehen ” Klicken Sie zur Vorschau.

Wie Sie sehen, gibt es keine neue Technologie, die zur Lösung dieses Problems eingesetzt wird. Möglicherweise sind einige Kombinationen nur durch die Vorstellungskraft des Entwicklers begrenzt.

Verwenden Sie rem-Einheiten in Medienabfragen

Die Verwendung von em- und rem-Einheiten in Medienabfragen steht in engem Zusammenhang mit dem Konzept der „optimalen Zeilenlänge“ und kann für ein flüssigeres Leseerlebnis des Benutzers sorgen. Im September 2014 veröffentlichte das Smashing Magazine einen Artikel über Web-Typografie mit dem Titel „Size Matters: Mastering the Balance of Text Size and Line Width in Web Responsive Design“. Das Interessanteste ist, dass der Artikel die optimale Breite der Zeile angibt, 45 bis 85 Zeichen (einschließlich Leerzeichen und Satzzeichen), 65 ist der ideale Wert für die Zeilenbreite.

粗略的估计一个字节大小就是 1rem，利用这个方法我们就可以用一种移动优先的方式控制内容的单行文本流：

.container { 
  width: 100%; 
} 
 
@media (min-width: 85rem) { 
  .container { 
    width: 65rem; 
  } 
}

然而在媒体查询中使用 em 和 rem 单位作为媒体查询的条件时有一个有意思的细节：1 rem，1em 还有浏览器默认文字大小这三值表示这同一个值。这样做的原因可以在媒体查询规范得到解释(特别强调):

询中相对单位都是以一个初始值作为基准，这就意味着这些单位永远不会基于声明的结果。例如：在 HTML 中，em 单位与用户浏览器或者用户偏好设置中设置的初始文字大小有关，而不是页面上的样式中定义的文字大小。

让我们看一个关于这个特性的一个小例子：

在 CodePen 上看一个关于媒体查询的 demo

首先，在我们的 HTML 文档中，有一个元素将会展现视口的宽度：

`Document width: <span></span>px`

接下来是两条媒体查询语句，一条是使用 rem 单位，另一条使用 em 单位(这里为了简便，使用了 Sass)

html { 
  font-size: 62.5%; /* 62.5% of 16px = 10px */ 
 
  @media (min-width: 20rem) { 
    /* 20*16px = 320px */ 
    background-color: lemonchiffon; 
    font-size: 200%; 
    /* 200% of 16px = 32px */ 
  } 
 
  @media (min-width: 30em) { 
    /* 30*16px = 480px */ 
    background-color: lightblue; 
    font-size: 300%; /* 300% of 16px = 48px */（译：原文是48px） 
  } 
}

最后，我们使用一点 jQuery 在页面上显示视口的宽度，并且在窗口缩放的时候更新这个值：

$('span').text($(window).width()); 
 
$(window).on('resize', function(e) { 
  $('span').text($(window).width()); 
});

在开头，我们使用了 62.5% 这个方法来说明，修改根元素字体大小不会对媒体查询产生任何影响。当我们更改窗口的宽度时，我们可以看到在 320 px 时，第一条媒体查询开始起作用，到480px第二条媒体查询开始起作用。任何一条在媒体查询中对文字大小声明的改变都没有起作用。唯一一个可以改变媒体查询中宽度的是在浏览器里更改默认文字大小。

因为这个原因，在媒体查询语句中使用 em 单位还是 rem 单位已经不那么重要了。事实上，无论是Foundation v5还是最近刚发布的Bootstrap v4 alpha都在他们的媒体查询中使用了 em 单位。

使用 rem 单位来缩放文档

我们能发现的第三种使用 rem 单位的方式是去构建可缩放组件。使用 rem 来定义元素的宽度，外边距和内边距 通过使用根元素的字体大小作为一个接口使元素缩放一致变为了可能。 我们可以通过下面两个例子来看这是怎么起作用的。

使用 rem 来缩放文档实例一

在这个例子里，我们通过媒体查询中更改根元素的文字大小。就像上一个章节所讲，这样做的目的是为用户定制不同设备下的不同阅读体验。通过 rem 单位来表示宽度，外边距，内边距，这样所有元素就会基于用户的设备大小缩放。

让我们看另一个例子：

代码可以看 SitePoint(@SitePoint点击预览) 在 CodePen 写的 《使用 rem 动态缩放模块》点击预览

在第二个例子中，我们使用 JavaScript 来做同样的操作。这次用户根据自己的需要手动控制界面的大小。我们可以使用多种方式(可以使用数据库，cookie 还有本地存储)来存储用户数据，这样就可以给用户搭建一个基于用户偏好的个性化系统。

总结

在这里总结一下到目前为止我们对 CSS 中 rem 单位的认识。很显然，在项目中使用 rem 有许多优点，比如：响应式，可缩放，增加阅读体验，增加自定义元素的灵活性。rem 虽然不是一个通用的解决方案，但是通过谨慎的使用，它还是可以解决困扰开发者多年的问题。 我们每个人都可以去挖掘 rem 的所有潜能。从你的编辑器开始吧，实验并向我们分享您的成果。