CSS中强大的EM
使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回。稍为有一点理解,今天特意整理了一份博文与大家一起分享,希望对童子们有些许的帮助。
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回。稍为有一点理解,今天特意整理了一份博文与大家一起分享,希望对童子们有些许的帮助。
在网络中充满了资源告诉你用相对长度em
和rem
来代替像素,因为它们会使你的设计更容易。几乎我所知道的所有的前端工程师(包括我自己)多年来都盲目的追随这些指示,这在行业中也变成了一个约定俗成的标准。最近我做了一些调查研究,完全改变了我对这两个相对单位的看法。从现在开始我将不会再使用rem
并且只会在非常特殊的用例中才会使用em
。在这篇文章中我将分享我的观察结果,希望可以说服你结束我们挚爱的rem
单位,最终没有回退的使它进入我们的工具(鉴于IE8死的慢),但是变得毫无用处支持更受欢迎的CSS参考像素。
网页字体排版的最佳实践之一就是使用相对单位,如rem
和em
。问题是,你应该使用哪一个呢?一直以来,rem
支持者和em
支持者之间都存在着争辩,认为应该使用自己支持的那个。在这篇文章中,你会找到我如何在rem
和em
之间做抉择.你也将了解rem
和em
到底是什么以及如何使用它们来构建模块化组件。
你是否思考过对于媒体查询你应该使用px
, em
还是rem
?我也产生过同样的问题,并且目前为止,我还是没有明确的答案。一年之前,我第一次创建 mappy-breakpoint 仓库时,我一直使用rem
单位。之后一次和Sam Richard谈话之后,我开始转向使用em
,因为我并没有发现两者之间的区别。关于媒体查询,除了em
和rem
,常用单位还有像素。自从现在所有浏览器存在像素缩放问题,我想知道像素是否还可以用于媒体查询。这周,我打算弄明白两者之间的区别。