px、em、rem区别

一直对px、em、rem这几个单位的区别不是很清晰，今天查阅了一些资料，整理了一下自己的理解。

1.62.5%是什么？

相信写过响应式的小伙伴都知道下面的代码：

html {font-size: 62.5%!important;}

这里为什么是62.5%？
因为任意浏览器的默认字体高都是16px。
而1em=16px。那么12px=0.75em,10px=0.625em。
但是这样非常不好计算。比如14px=?em。反正我是不能心算出来。
为了简便计算，把字体设置成62.5%。
这就使em值变为 16px*62.5%=10px,这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。所以14px=1.4em;这样就简单多了。

2.px,em,rem区别

px

-相对于屏幕，像素点。

em

-当前对象内文本的字体尺寸。注意：它会继承父元素的字体。
举例：父元素和子元素都是14px的字体，正确代码如下：

.parent{font-size:1.4em;}  .parent .son{font-size:1em;//错误写法：font-size:1.4em;要是这样写，实际字体大小会是1.4*1.4em}，显然，这并不是我们想要的。

rem:

css3新增的。它和em的区别就是不会继承父元素的字体。

兼容性

如果需要兼容浏览器也很简单，只需要把px和rem都设置上就可以了。

p {font-size:14px; font-size:1.4rem;}