css中px，em和rem的区别

css中px，em和rem的区别

　　今天，突然间发现一个特别有意思的问题，就是无意间看到一个网站中的em并不是16px，下面展开了对于px和em以及rem的探究。

　　首先，px是绝对长度单位，是相对于显示器屏幕分辨率而言的，而em、rem是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。在国内，大部分网站是无法调整的，他们大部分是用的px做单位，国外的网站大多用em或rem作为单位字体，他们的网站的字体就容易调控。

　　然后针对单独的px、em、rem我们说说他们的不同特点：

　　　　px特点：px是典型的度量单位，值是固定的
　　　　em特点：em的值并不是固定的; em会继承父级元素的字体大小。
　　　　rem特点：rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
　　那么问题来了，它们之间如何转化呢？下面是几种常见的转化方式：

　　　　PX to EM
　　　　　　Example: 12px / 16px = .75em
　　　　PX to %
　　　　　　Example: 12px / 16px * 100 = 75%
　　　　PX to PT
　　　　　　Example: 16px * (72pt / 96px) = 12pt
　　　　EM to PX
　　　　　　Example: .75em * 16px = 12px
　　　　EM to %
　　　　　　Example: .75em * 100 = 75%

　　所以我们在写CSS的时候，需要注意：
　　　　1. body选择器中声明Font-size=62.5%；
　　　　2. 将你的原来的px数值除以10，然后换上em作为单位；
　　　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
   　　　　 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
　　我们还需要注意的是：rem设置的字体大小并不会随着浏览器的屏幕的改变而改变，它的改变与浏览器本身有关。

　　最后为大家提供一个px,em,rem单位转换工具，地址：http://pxtoem.com/