css中px、em、rem有哪些区别-创新互联

这篇文章给大家分享的是有关css中px、em、rem有哪些区别的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

区别：px表示像素，是相对长度单位，是相对于显示器屏幕分辨率来设置字体大小的，不支持IE的缩放；em是相对长度单位，是相对于其父元素来设置字体大小的，支持IE的缩放；rem是相对长度单位，是相对HTML根元素来设置字体大小的。

PX，EM和REM的定义

px表示像素，不会因为其他元素的尺寸变化而变化。

像素的大小是会“变”的，也称为“相对长度”，越高位的像素，其拥有的色板也就越丰富，越能表达颜色的真实感。

em表示相对于父元素的字体大小，em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，国外使用比较多。

任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合：1em=16px。那么12px=0.75em；10px=0.625em；为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为：16px*62.5%=10px；这样12px=1.2em；10px=1em，也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

REM是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

CSS样式表中px、em和rem单位的特点

一般情况下，我们平时都是用px来定义字体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用，这主要是因为：

（1）、IE无法调整那些使用px作为单位的字体大小；

（2）、国外的大部分网站能够调整的原因在于其使用了em作为字体单位；

（3）、Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

那么，css单位px、em和rem的特点分别是什么呢？

1、px的特点

PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。

但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破，这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。

因此，这时就提出了使用“em”来定义Web页面的字体。

2、em的特点

EM就是根据基准来缩放字体的大小，EM实质是一个相对值，而非具体的数值，这种技术需要一个参考点，一般都是以的“font-size”为基准，如WordPress官方主题Twenntytwelve的基准就是14px=1em。

通常来说，em有如下特点：

（1）、em的值并不是固定的；

（2）、em会继承父级元素的字体大小。

所以，我们在写CSS的时候，需要注意以下3点：

（1）、body选择器中声明Font-size=62.5%；

（2）、将你的原来的px数值除以10，然后换上em作为单位；

如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象，因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。

然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em= 1.2 * 12px=14.4px，这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px，而p作为其子级，em则继承content的字体高，也就是12px，所以p的1.2em就不再是12px，而是14.4px。

（3）、重新计算那些被放大的字体的em数值，避免字体大小的重复声明。

也就是避免1.2 * 1.2 = 1.44的现象，比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em，因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题已经解决，只需在body选择器中把62.5%换成63%就能正常显示了，原因可能是IE处理汉字时，对于浮点的取值精确度有限，不知道有没有其他的解释和优化方法（关于更多细节的优化，可查看马海祥博客《看看那些能提高效率却容易被人忽略的CSS细节》的相关介绍）。

3、rem的特点

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。

EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

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

对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

CSS样式表中px、em和rem单位的区别

通常情况下，我们区分px和em的差异就是说：px是绝对单位，不支持IE的缩放，em是相对单位，支持IE的缩放，其实，css单位em、px和rem的区别，详细来说，有以下几点：

1、PX：像素

PX是相对长度单位，它是相对于显示器屏幕分辨率而言的。

优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2、EM

EM：是相对长度单位，EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

优缺点：EM的值并不是固定的，它会继承父级元素的字体大小。

PX和EM的之间的相互转换：

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em=16px。那么，12px=0.75em，10px=0.625em。

为了使用方便，用em时，我们通常在CSS中的body选择器中声明font-size=62.5%（使em值变为：16px*62.5%=10px），之后，你只需要将你使用的px值除以10，即可得到em值，如：12px=1.2em，10px=1em。

3、REM

REM是CSS3新增的一个相对单位，REM是相对单位，是相对HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

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

感谢各位的阅读！关于css中px、em、rem有哪些区别就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！