CSS中EM单位的力量-css教程-PHP中文网

钥匙要点

结论

CSS中的EM和REM单位之间的区别是什么？ EM相对于其最接近的母体或当前元素的字体大小。这意味着，如果将元素的字体大小设置为1.2em，则将是父尺寸大小的1.2倍。另一方面，REM相对于根或HTML元素。因此，如果将元素的字体大小设置为1.2REM，则将是根元素字体大小的1.2倍。这使得与EM相比，REM更容易预测，更易于控制。

>如何将像素转换为CSS中的EM单元？

>为什么我要在CSS？

em单位中使用EM单位而不是像素提供了比像素的几个优势。它们是可扩展的，这意味着它们会根据用户的默认浏览器设置或设备的设置进行调整。这使您的网站更容易被视觉障碍的用户访问，这些用户可能需要增加字体尺寸。 EM单元还允许根据母元素的字体大小进行调整，因此可以进行更灵活和响应的设计。

>

>在CSS中使用EM单元是否有缺点？

，而EM单位具有许多优势，它们也可能比像绝对单位一样难以管理。因为EM单位是相对的，所以它们的实际大小可以根据上下文改变。这可能会使更难预测元素的大小，尤其是在带有嵌套元素的复杂布局中。

>我可以在CSS中的媒体查询中使用EM单元吗？实际上，在媒体查询中使用EM单元可以提高设计的响应能力。由于EM单元是相对的，因此它们会根据用户的默认浏览器设置或设备的设置进行调整。这意味着您的媒体查询将适应用户的设置，而不仅仅是视口尺寸。

首页

web前端

css教程

CSS中EM单位的力量

Christopher Nolan

Feb 28, 2025 am 09:52 AM

The Power of em Units in CSS

CSS中EM单位的力量

钥匙要点

> EM单元与模块化CSS技术（例如组件级造型或代码的封装部分）良好工作。它们可用于确保组件的元素相对于彼此的尺寸，并可以轻松调整大小。
> EM单位具有与像素相比的几个优点。它们是可扩展的，这意味着它们会根据用户的默认浏览器设置或设备的设置进行调整。这使您的网站更容易被视觉障碍的用户访问，这些用户可能需要增加字体尺寸。 EM单元还允许根据父元素的字体大小进行调整，可以进行更灵活和响应的设计。

使用CSS中的每个复杂功能，当您看到该功能的真正功能多么强大时，您将始终拥有该转折点。而且，信不信由你，我与EMS的个人转折点是在我写了一个充满双关语的介绍之后很久。尽管到那时我已经很好地了解了EMS，但我确实开始看到当我阅读Simurai在介质上的尺寸（Web）组件上的帖子时，它们的功能有多强大。因此，我要在这篇文章中骑他的coattail。在这里，您会发现对EM单元的快速介绍，然后进行现场演示，介绍了他所描述的技术。

CSS中的EMS是什么？在CSS中，EM单元等于用于应用EM的元素的计算字体大小。当在未定义字体大小的子元素上声明EM单元时，它们将从父母或另一个祖先元素中继承其字体大小，可能会一直回到文档上的根元素。查看以下CSS：

在这种情况下，对此元素或其子元素的1EM（假设没有其他字体大小的定义）等于20px。因此，如果我们添加了一行：

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>}</span>

登录后复制

这个边界 - 拉迪乌斯的值为.5em 计算为10px（即20*.5）。相似地：

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>}</span>

登录后复制

2EM的填充值等于40px（20*2）。如前所述，这种类型的计算也适用于任何子元素 - 除非这些子元素中的任何一个具有明确定义的字体大小值，在这种情况下，EM值将根据该值计算。如果未在CSS中任何地方定义字体大小，则EM单元将等于浏览器的文档默认字体大小，该字体通常为16px。我认为这应该可以清楚地表明EMS的工作原理。现在，让我们看一下如何使用该技术来制作易于解析的Web组件，如Simurai在原始媒介文章中所讨论的那样。我将通过提供演示来看到这一点，将他的想法进一步迈出。

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>padding: 2em;
</span><span>}</span>

登录后复制

何时在CSS

中使用EM EM单元与模块化CSS技术（例如组件级的样式或代码的封装部分）的效果很好。例如，它们可用于确保组件的元素（例如卡片的元素）相对于彼此的尺寸，并可以轻松地调整大小。该技术基本上是这样的：使用字体大小的属性，如Simurai所指的，用作“特洛伊木马”，为我们组件中的各个元素或模块创建基本单元。由于上述EM单元是基于root定义的字体大小上元素上的字体大小来计算的，因此这使整个组件可以通过简单地更改父元素上的字体大小来易于解析。让我们在Codepen演示中查看这一点：

>请参阅codepen上的sitepoint（@sitepoint）的EMS使用EMS的笔这个愚蠢的小模块中有四个基本元素。没什么花哨的，只是一个说明这一技术的例子。移动演示页面顶部的范围滑块以更改模块的大小。您也可以在全屏上进行测试。将范围滑块挂在组件的根元素上的单个值上：字体大小值。应该注意的是，使组件可使用此单个CSS属性解析的组件不一定是为了使用户可以这样做。主要是为了维护模块的开发人员可以快速进行调整，而不必摆弄组件的所有部分的不同值。如上一节所述，随着字体大小的变化，这会滴入该父元素上设置的所有EM值以及其所有子元素，从而使组件的所有部分都按比例灵活。如果您检查CSS，您会注意到以下内容：

组件内部的所有内容均大大为EMS，除了外部边框（我们希望始终保持在2px）和图像，如果我们愿意，我可以调整大小的图像，但是我对它的尺寸对这种情况感到满意。
>
> CSS还包括两个调整父上字体大小的媒体查询。同样，这显示了此技术的有用性，因为您不必更改媒体查询中的所有各种尺寸，而只需更改字体大小。

一些笔记，缺陷等。

> 从使用演示中的范围滑块可以看到，这种灵活的调整并不总是您想使用的。这可能有些限制。您可能需要调整一些EM值才能使它们获得自己喜欢的方式，并且，与演示中的父边界一样，您可能不希望调整大小的能力适用于所有元素。您可以通过简单地避开要遗漏的元素来轻松克服这一点。如Simurai的原始文章的讨论中所述，您不必使用PX单元来设置ROOT字体大小。您也可以为此使用EMS，但请记住，这将以与父母相同的方式继承，这可能来自文档对字体大小的默认值。

REMS和SASS呢？

> CSS中的REM单元始终从文档的根元素上的基本字体大小设置继承其值，而与计算字体大小无关。在HTML中，根元素始终是HTML元素。因此，您可以使用REMS，但这意味着您必须使用该元素上的字体大小来控制页面上的所有组件。它可以在某些项目上起作用，但是我认为，当将可重构性集中在孤立的组件上而不是整个文档上时，这种技术最有效。至于使用像Sass这样的预处理器，我认为这是一个侧点。最终，您的编译样式表将使用您在SASS代码中使用的任何单元，并且继承将以相同的方式工作。

结论

如前所述，Simurai值得使这项技术更广为人知。当然，正如他所提到的那样，这并不是什么新鲜事物，多年来，许多经验丰富的开发人员已经使用了基本概念，但是在Web组件或模块的背景下，也许不是那么多。正如Simurai所说，我认为这是构建CSS框架或组件库时使用的一种很好的方法，如果没有其他的话，我认为该技术确实会使EM单元的功能强大。当然，EM并不是唯一可用的CSS单元。查看我们对CSS尺寸单元的概述。