Rem VS Px

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

在网络中充满了资源告诉你用相对长度emrem来代替像素,因为它们会使你的设计更容易。几乎我所知道的所有的前端工程师(包括我自己)多年来都盲目的追随这些指示,这在行业中也变成了一个约定俗成的标准。最近我做了一些调查研究,完全改变了我对这两个相对单位的看法。从现在开始我将不会再使用rem并且只会在非常特殊的用例中才会使用em。在这篇文章中我将分享我的观察结果,希望可以说服你结束我们挚爱的rem单位,最终没有回退的使它进入我们的工具(鉴于IE8死的慢),但是变得毫无用处支持更受欢迎的CSS参考像素。

REM

em单位在排版中有它的起源,em是作为给定类型字体大小的相对大小。在过去,打印都是关于凸版印刷排版,用金属将信印在纸上所以被叫做空铅(最初的嵌块)。这些空铅都有相同的高度,可以适合给定大小和类型的字母表中的每一个字母。然而,他们有不同的宽度,因为大写的字母“M”在宽度和高度上接近相等,所以约定俗成的将"M"的宽度作为相对单位建立。因此em单位名的起源只是因为这个是字母"M"的语音表达(ɛm)(我找不到对这个起源的任何历史证明,但是人们似乎认为这是最合理的解释)。

电脑都是关于像素的,在1996年在CSS1中引入em长度时,主要目的是引入一种相对于给定上下文的字体大小的单位。规范中说到:

相对单位emex是相对于元素本身的字体大小的。在CSS1中唯一的例外是font-size属性,它的emex值指的是父元素的字体大小。

在开始的时候em是一个对CSS很好的增加,它允许建立一个对你的内容敏感的设计。你可以相对于父元素来设置子元素的文本大小,或者做一些事情像用em来指定你的内边距来确保在你的文本容器中有一个比你的字间距更大的内边距。(符合邻近的视觉规律)

另一个用例,是em变得非常受欢迎的主要原因,就是可访问性原因。它的相对于DOM的根节点的性质(接下来下面将提到其约束)使它完美的根据用户偏好调整你整个设计的尺寸。浏览器支持改变默认的字体大小从而改变你整个网站中em的计算结果。

但是em有一个相当大的缺点。像在规范中列出的,它是继承的,如果你有多个嵌套的元素重载em的字体大小,每次你想计算DOM中深层的节点的字体大小的时候,你都需要经过很多数学运算。

让我们通过观察下面的代码片段来快速的说明这个问题:

<div class="level-1">
  <div class="level-2">
    <div class="level-3">
      <p>Hello!</p>
    </div>
  </div>
</div>

html {
  font-size: 20px;
}

.level-1, .level-2 {
  font-size: 0.5em;
}

.level-3 {
  font-size: 2em;
}

你觉得“Hello”文本的字体大小是多少呢?因为em的值随着DOM的级联和嵌套变化,所以真的很难跟踪发生了什么。在这个例子中,文本的字体大小是10px,因为html元素最初的20px在乘以2之前乘了两次0.5

REM,相对单位的超级英雄 !

最后,用CSS3解决上面的问题。REM表示“Root EM”,字面上指的是根元素的em大小。在Web文档的上下文中,根元素就是你的html元素。

这个简直太奇妙了!我们可以方便的使用相对字体大小,而且还避免了使用嵌套的em结构的混乱。几乎每一个开发人员接受这个新的、奇特的CSS长度单位,它变得非常受欢迎。

唯一的问题是缺少IE8的支持。自2005年CSS3的第二稿以来,REM没有被认为重要的足以包括在四年以后发布的IE8中。不管怎样,正如我们知道如何解决IE的问题一样,我们开始使用REM的像素后退模式。

.my-text {
  font-size: 32px;
  font-size: 2rem;
}

CSS是温和的,它总是建立在优雅降级的概念上。如果渲染引擎不理解一个属性或者值,它只是忽略它。这使得现代浏览器支持用rem指定属性,而老的浏览器只是忽略后面用rem指定属性的那行。

移动时代

今天我们生活在一个移动时代,这从两端改变了互联网,我们如何使用它以及我们如何建立它。响应式网页设计变得非常流行,并且可能是最常用的专业术语。虽然在2010年媒体查询模块已经被Håkon Wium Lie具体说明,但它加入到CSS3规范中是在相对较晚的工作草案8中,同时这也是最后使用的工作草案。

现今每个前端工程师意识到媒体查询是一个很有用的东西,在某种程度上我们几乎在每个项目中都用到它。在媒体查询变得流行,人们开始为移动设备设计他们的网站之后没多久开始了一些争论,关于使用像素还是相对字体单位remem来指定媒体查询。让我们来看看Zurb在2011年十月发布的响应式CSS框架Foundat

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

如需转载,烦请注明出处:https://www.w3cplus.com/css/r-i-p-rem-viva-css-reference-pixel.html

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

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