☟用心感受、用心体会、用心设计、用心反馈☟
……
随着所有关于响应式网站设计的讨论，两个小词不断出现——em 和 rem。但它们是什么？
 
Em 和 rem 以及像素是测量和调整类型大小的单位和方法。Em 和 rem 是相对的，而不是静态的单位，并且越来越多地用于响应式网页设计方案。今天让我们深入研究这个概念，并更清楚地解释一下！

 

 

Ems从哪里来？

 
具有讽刺意味的是，术语“em”起源于印刷设计。em 是任何字体中大写 M 的大小，使大小相对于字体。
 
当涉及到间距时，许多印刷设计师都熟悉 em（以及他们的对应物 en）。em 空格或 en 空格（大写字母 N 的大小）通常用于使大字体中的单词和空格看起来更好。em 和短划线或长短划线也是如此。
 
这种比例间距理论对于网页设计是相同的。当涉及到数字布局时，em 以类似但更精确的方式定义：em 是相对于父元素的类型大小计算的类型大小。
 
Rem 是 em 的演变。这些“根 em”的功能与 em 非常相似，但有一个例外：rem 是相对于顶级“html”元素而不是父元素的类型大小计算的类型大小。

 

 

了解 Em

 
Em 本质上像百分比值一样工作，无论字体或大小如何，都使字母具有相同的“大小”。由于这种滑动比例性质，em 被称为相对单位。（与绝对单位（例如派卡、点和英寸）相比，其他相对单位包括百分比和像素。）这种方法是测量类型的流行解决方案，但不适用于其他测量（例如空格或边距）。
 
使用 em 作为字体大小基础的优点是，通过仅更改父字体大小，你可以同时更改所有字体大小。此选项还可以帮助所有用户在查看站点时获得类似的体验——无论是使用不同的在线浏览器还是使用不同的设备——因为一些较旧的浏览器不会调整以像素为单位设置的文本大小。结果？
无论你如何查看网站上的类型，它看起来都符合预期 – 放大或缩小或在不同的设备上。
 
使用 em 的挑战在于你必须知道（并记住）父级大小，因为它是其余类型行为的基础。
 
这是一个示例，说明 em 如何分解为 14px 父字体大小：

  • 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 相关的附加可用性体验。
 
可以这样想：像素为设计者/开发者提供了大量控制，但为用户提供了很少的控制。定义的像素大小就是定义的，不会根据用户环境而改变。虽然它们在创建过程中可能易于使用，但它们可能会导致最终产品出现问题。
 
从像素跳转到 em（或 rem）并不是那么困难，如果你很难理解它，请查看Pixel to Em Calculator以了解它们的比较方式。

 

 

结论

 
现在你对数字设计中用于测量和缩放类型的不同单位有了更好的了解，你应该使用什么？
 
答案并不简单。我的建议是使用你熟悉的以及最适合每个项目的方法。Em 和 rem 是更流畅的度量，并且在项目中会更一致地工作，尤其是响应式的。在制作模型时，像素仍然是许多人的首选单位。
 
你可能会发现拥有所有这些工具是最好的解决方案。
声明：* 本站所提供的资源均来源于互联网，站内所有文字、图片内容由网站会员上传而来，UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷，本站不负任何责任。如果有侵犯到您的权益，请联系本站删除，谢谢合作！联系邮箱：Uishe#qq.com (请将[#]换成@)