CSS技巧：EM和REM的相对单位
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
我们已经见识过相对计量单位 % 的用法。当我们想要一个元素使用例如 100% 的可用空间时，我们会使用这种相对计量单位。
HTML：
<div>
<img src="img/avatar.png" alt="Avatar">
</div>
CSS：
div {
width: 400px;
}
在上面的例子中，根据图像的大小，图像可能超出我们定义的空间<div>，也可能只占较小的空间。如果我们希望图像占据整个空间<div>，可以使用相对单位 %：
div {
width: 400px;
}
img {
width: 100%; /* It occupies 100% of the available space */
}
使用 % 的最大优点是，无论我们在 中输入什么大小<div>，<img>它始终会跟随其父标签（<div>）的大小。
EM 和 REM 的概念与百分比相同，但它们不是基于元素的大小，而是基于字体的大小。EM 使用父元素的字体大小，而 REM 使用元素的字体大小<html>。
HTML：
<html>
<head>
<meta charset="UTF-8">
<title>An example</title>
</head>
<body>
<div>
<img src="img/avatar.png" alt="Avatar">
</div>
</body>
</html>
CSS：
html {
font-size: 10px;
}
div {
font-size: 20px;
}
img {
width: 10em; /* The width will be 200px */
height: 10rem; /* The height will be 100px */
}
使用这些度量单位的优势在于，如果其他元素也使用这些度量单位，并且我们需要按比例调整所有元素的大小，只需在一个地方进行更改即可。这些度量单位非常适合网站需要在不同屏幕尺寸上显示的情况，因为在每种屏幕尺寸上，字体都必须以不同的比例显示，并且彼此之间保持比例。
文章来源：https://dev.to/fariasmateuss/css-tips-relative-units-with-em-and-rem-3n38