在CSS中px、em、rem的介绍以及区别？

我好像每次在写文章之前总要写一段和标题不相关的废话，写就写吧，就当是送给自己的礼物，以后回想起来你不那么干燥乏味。ZFT学长突然和我讲起这三个的区别和作用听的我云里雾里的，所以我打算写一遍文章让自己真正理解。因为之前一直都是再用PX的，em、rem了解的甚少。

CSS中的px？

px就是pixel的缩写啦，pixel即像素，绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。px是就是一张图片中最小的点，一张位图就是由这些点构成的。如果是屏幕的分辨率是1024×768，也就是说水平方向上有1024个点，垂直方向上有768个点。如果分辨率越高、那么点就越小、画面就越清晰。反之分辨率就越低。

特点：

1、在IE上无法调整以PX作为单位的字体大小；

2、大本分网站能够调整字体大小的原因的因为使用了em或者rem作为字体的单位；

3、FireFox上能够调整px、em、rem，但是国内96%以上的用户使用IE浏览器（或内核）。

CSS中的em ?

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对行内文本没有进行人为字体设置，那么就相对于浏览器默认的字体大小。

特点：

1、em不是固定不变的；

2、em继承父类的字体大小。

注意：

1、任何浏览器的默认字体大小都是16px，1em=10px ；

2、在写CSS中的时候，在body选择器中声明Font-size=62.5%，那么1em=10px；

3、因为em继承父类的字体大小，那么需要重新计算你定义的字体大小，避免重复计算了。

CSS中的rem

rem是CSS3新增的一个相对单位，我们前面说的em是相对于父类进行设置字体大小的，这就存在一个问题，就是我们在设置任何元素的字体大小时，都需要知道他父类的字体大小，就会打来无法预知的错误风险。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

打个比方：

html{ font-size:62.5% }

h4{

font-size:1.2rem;

}

p{

font-size:2.3rem;

}

兼容性：

IE8以下的版本不支持，几乎支持其他所有的浏览器。应对方法也很简单，加一个绝对单位的声明就可以了。

举个例子：

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

我们使用rem就像px一样方便，解决了px和em两者不同之处。

注意：上文中所写的为个人版权，如需转载请注明出，欢迎联系作者，一起讨论学习。

邮箱：[email protected]