CSS样式表中px、em和rem单位的区别与使用特点
时间：2022-05-29 14:51:01 | 来源：网络营销
时间：2022-05-29 14:51:01 来源：网络营销
最近在制作一些新网站，总听人说网站制作中字体单位应该用em而不用px，原因简单来说就是支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应，px是绝对单位，不支持IE的缩放，em是相对单位。
其实，在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的设计师等都是使用了px作为字体单位，只有百度好歹做了个可调的表率，而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的，那么，CSS样式表中px、em和rem单位的区别是什么呢？其使用特点又是怎样的呢？
一、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实质是一个相对值，而非具体的数值，这种技术需要一个参考点，一般都是以<body>的“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是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
目前，除了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。
亿企邦点评： 综合以上几点的区别，亿企邦推荐大家在这几种情况下来选择使用：PC端固定宽度的页面使用px；PC端自适应页面使用em；移动端使用rem。
除了IE6-IE8之外，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。因此为了浏览器的兼容性，可“px”和“rem”一起使用，用“px”来实现IE6-IE8下的效果，然后使用“Rem”来实现代浏览器的效果。
在线咨询
