响应式网站设计中Em和Rem的差别是什么？他们之间怎样转换

随着关于响应式网站设计的讨论，两个小词不断出现 – em和rem。但他们是什么？

Em和rem以及像素是测量和调整类型的单位和方法。Em和rem是相对的，而不是静态的单元，并且越来越多地用于响应式Web设计方案。让我们今天深入探讨这个概念，并更清楚地解释一下！

Ems来自哪里？

网站建设

具有讽刺意味的是，术语“em”源于印刷设计。em是任何字体中的大写M的大小，使得大小相对于字体。

在间距方面，许多印刷设计师都熟悉em（及其对应的en）。em空间或en空间 – 大小为N的大小 – 通常用于使单词和空格在大类型中看起来更好。em和en破折号也是如此 – 或者长短划线。

这种比例间距理论对于网页设计是相同的。当谈到数字布局时，em以类似但更精确的方式定义：em是相对于父元素的类型大小计算的类型的大小。

Rem是em的演变。这些“根ems”的功能与em非常相似，只有一个例外：rem是相对于顶级“html”元素的类型大小而不是父元素计算的类型大小。

了解Em

Em基本上像百分比值一样工作，尽管字体或大小，但字母的大小相同。由于这种滑动尺度特性，em被称为相对单位。（其他相对单位包括百分比和像素，与绝对单位，如皮卡，点和英寸相比。）这种方法是测量类型的常用解决方案，但不适用于其他措施，如空格或边距。

使用em作为类型大小的基础的优点是，通过仅更改父级大小，您可以同时更改所有类型大小。此选项还可以帮助所有用户在查看网站时获得类似的体验 – 无论是在线使用不同的浏览器还是使用不同的设备 – 因为某些旧版浏览器不会调整以像素为单位的文本集。结果？

无论您如何查看网站上的类型，它都会按预期显示 – 放大或缩小或在不同设备上放大。

使用em的挑战在于您必须知道（并记住）父级大小，因为它是该类型其余部分的行为基础。

这是一个如何使用14px父字体大小分解em的示例：

• 1 em = 14像素：这是父类型，基于主体副本的常见类型大小
• .5 em = 7像素
• 1.5 em = 21像素
• 2 em = 28像素

与rem有什么区别？

Rem最终以相同的方式运行，但没有定义的父字体大小。根html元素定义与rem的关系，这意味着您将在html元素上定义字体大小，并将rem单位定义为该百分比。字体大小始终相对于此根html大小，而不是在嵌套具有不同大小的多个容器时进行调整。

在您完成数学运算之后，使用rem可以是一种更直接的方法来维护正确和均匀的大小调整。

首次引入时，对rem有一些阻力，因为浏览器并不普遍支持它们。这不再是一个问题; rem适用于所有主要的现代平台。

像素如何适应？

但像素 – 每个人似乎都明白的常见单位呢？像素是数字设计的原始测量单位，仍然使用。但是在类型方面，它们的使用变得越来越少，因为设计师希望增加与em和rem相关的可用性体验。

可以这样想：Pixels为设计人员/开发人员提供了很多控制权，但对用户的控制却很少。定义的像素大小就是定义的 – 并且不会根据用户环境而改变。虽然它们在创建过程中可能很容易使用，但它们可能会导致最终产品出现问题。

从像素跳到em（或rem）并不是那么困难，如果你很难理解它，请查看Pixel to Em计算器以了解它们的比较方式。

结论

既然您已经对数字设计中用于测量和缩放类型的不同单元有了更好的理解，那么您应该使用什么？

答案并不简单。我的建议是使用您熟悉的内容以及每个项目最适合的内容。Em和rem是更加流畅的措施，并且将在项目中更加一致地工作，尤其是响应式项目。在处理模型时，像素仍然是许多人的首选单位。

您可能会发现拥有所有这些工具是最佳解决方案。