css中的单位px,em和rem的区别

时间:2022-02-19 15:30:36

一、px:

px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页。当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大。由于这种问题,就提出了使用em来定义页面上字体大小。

二、em

em是一个相对的值,而不是一个具体的值,是根据一定的比例去缩放字体,那么就会出现一个问题,em的值是相对于谁的大小来缩放的,也就是说,缩放的基准是什么?一般来说,em的大小是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

除了浏览器的初始字号设置之外,em也可以从包含标签中继承尺寸信息。一个0.9em的类型尺寸将使文本在大部分以16px为基础尺寸的显示器上为大约14px高。但是如果你有一个带.9em的字号的<p>标签,然后在这个<p>标签中有一个带0.9em的<strong>标签,这个<strong>标签的em尺寸就不是14px而是12px(16*0.9*0.9)。因此在使用em值时要记住继承这个特性。

三、rem:


rem是css3提出的新属性,一般用于移动端。rem也是一个相对值,但是rem是相对于根元素(html)来说的。这样的话可以做到只修改根元素便可以调整所有字体大小。任意浏览器的默认字体高都是16px,因此我们可以简化简化font-size换算的方法:将body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。

在这里为大家提供一个px,em,rem单位转换工具