何时使用 Em 与 Rem

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

你可能已经很熟练使用这两个灵活的单位,但你可能不完全了解何时使用 rem ,何时使用 em。 本教程将帮你弄清楚!

emrem都是相对单位,由浏览器转换为像素值,具体取决于您的设计中的字体大小设置。 如果你使用值 1em1rem,它可以被浏览器解析成 从16px160px 或其他任意值。

何时使用 Em 与 Rem

padding设置了1em

何时使用 Em 与 Rem

解析出来的值为16px

何时使用 Em 与 Rem

padding设置了1em

何时使用 Em 与 Rem

解析出来的值为160px

另一方面,浏览器使用 px 值,所以 1px 将始终显示为完全 1px

滑动滑块试试这个 CodePen 例子,你可以看到remem 单位的值可以转化为不同的像素值,而 px 单位保持固定大小:

最大问题

使用 emrem 单位可以让我们的设计更加灵活,能够控制元素整体放大缩小,而不是固定大小。 我们可以使用这种灵活性,使我们在开发期间,能更加快速灵活的调整,允许浏览器用户调整浏览器大小来达到最佳体验。

emrem 单位提供的这种灵活性和工作方式都很相似,所以最大的问题是,我们何时应使用 em 值,何时应使用 rem 值呢?

主要区别

emrem 单位之间的区别是浏览器根据谁来转化成px值 理解这种差异是决定何时使用哪个单元的关键。

我们要通过复习 remem 单位如何工作,来确保你知道每一个细节。 然后我会讲到为什么你应该使用 emrem 的单位。

最后,我们会看看到底哪些典型元素的设计,你应该在实际应用中使用哪种类型的单位。

rem 单位如何转换为像素值

当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

例如,根元素的字体大小 16px10rem 将等同于 160px,即 10 x 16 = 160

何时使用 Em 与 Rem

CSS设置padding10rem

何时使用 Em 与 Rem

浏览器解析出来的值为160px

em 单位如何转换为像素值

当使用em单位时,像素值将是em值乘以使用em单位的元素的字体大小。

例如,如果一个 div18px 字体大小,10em 将等同于 180px,即 10 × 18 = 180

何时使用 Em 与 Rem

CSS设置padding10em

何时使用 Em 与 Rem

浏览器解析出来的值为180px(或接近它)

重点理解:

有一个比较普遍的误解,认为 em 单位是相对于父元素的字体大小。 事实上,根据W3标准 ,它们是相对于使用em单位的元素的字体大小。

父元素的字体大小可以影响 em 值,但这种情况的发生,纯粹是因为继承。 让我们看看为什么以及如何起作用。

Em 单位的继承效果

使用 em 单位存在继承的时候,情况会变得比较棘手,因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖,比如px,vw

使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小,而父元素又继承其父元素的字体大小,等等。 因此,以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

让我们看看一个例子。 在下面的 CodePen单步执行试试。 随着你的前进,使用 Chrome 开发工具或 Firebug 为火狐浏览器来检查我们的 em 单位计算到的像素值。

Em 继承的例子

如果我们的根元素字体大小为 16px (通常是默认值) 一个子元素 div 里面padding值为 1.5em,该 div 将从根元素继承字体大小 16px。 因此padding会解析成 24px,即 1.5 x 16 = 24

如果我们加多一个div来包裹原先的div,然后设置其字体大小为 1.25em呢?

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/when-to-use-em-vs-rem.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部