回到见解

2分钟阅读

像素的死亡

作者: 亚当·贝内特
发表于 内容行销 于2019年4月12日上午12:00

一段时间以来,通常的做法是使用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%时,按钮的尺寸也随之缩放。这显然是一个极端的例子,但是在现实的环境中,所有用户都将能够以相同的方式体验该网站,并且赢得了’不管它们的总体尺寸是大是小。

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

您如何看待这篇文章?

爱它

有趣

不适合我

做什么 [你] want to do next?

阅读更多博客。

看我们的工作。