pxemrem区别

一直对 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;}