像素的死亡

一段时间以来，通常的做法是使用REM单位设置字体大小。这是为了确保需要更改其默认字体的用户仍具有可读的内容。如果用户将其浏览器字体设置为基本20px而不是默认的16px，则网站上的所有字体都将相对于此缩放，因此以前等于32px的2rem现在等于40px。

但是，我们可以做得更好。它’将文本缩放到浏览器是一件好事，但是所有其他仍在使用像素的元素呢？使用像素设置的边距和内边距不会随浏览器缩放，最终会给用户带来麻烦，因为他们的特定设置会破坏样式。

例如：

这里有一个简单的按钮，看起来就像所有浏览器一样&PC设置被设置为默认值。

现在让我们看看更改此文档的基本字体大小时会发生什么。

看笔
REM vs像素 by Matt Brooking (@mbrooking)
在 密码笔.

假设用户将其默认字体大小设置为相当大（为了模拟这一点，我’请将HTML字体大小设置为450％）。当使用REM设置字体大小并与基本字体大小成比例时，包含文本的按钮’不能适应字体大小的变化，并导致文本从容器中溢出。这不仅影响按钮的可用性，而且看起来很可怕。

这里’s我们将所有像素替换为相对单位的示例。

看笔
REM vs像素（REM版本） by Matt Brooking (@mbrooking)
在 密码笔.

在这里，与字体大小一样，已使用REM设置了按钮的宽度和高度。字体大小设置为450％时，按钮的尺寸也随之缩放。这显然是一个极端的例子，但是在现实的环境中，所有用户都将能够以相同的方式体验该网站，并且赢得了’不管它们的总体尺寸是大是小。

最终结果是一个极其灵活和动态的网站，其中每个元素都会相对缩放。