px em rem在WEB前端开发中的区别

我们都知道基于像素的字体大小所用的单位是px，但是随着响应式设计的不断火热，基于相对字体大小的单位em变开始流行起来。当然，rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列。是不是需要用em或者是rem来替换掉px在前端开发中进行使用呢？

为什么我们需要使用相对字体大小呢？

或许我们最能直接想到的一点就是它关于CSS3的一些东西。很好理解的是它是一种字号计算方式，尤其是当你在为多种分辨率进行字号计算的时候。想想要在手机上实现字体变大或者变小的时候，你不得不要反复重新计算对象的字体大小，这是相当耗时间的。这个时候相对字体大小的设置才凸显出了它的有用之处。当你要在不同的样式结构中进行设置字体大小的时候，使用em或者rem能够让你针对一个具体的视屏进行字体大小的增大或者减小。

 

px，em，rem的区别在哪？

Px是一个绝对字体大小，em则是基于基数（比如：1.5em）来计算出来的相对字体大小。这个基数是需要乘以当前对象从其父级遗传字体大小。

 

1	1.5em = 父级字体大小 * 1.5 = ?

不过，这有个问题就是在css中想要知道当前元素的字体大小所遗传的是哪个父级元素的字号。因此，rem的出现就很好的解决了这个问题。rem是基于根节点（比如html）的字体大小进行计算的。

 

1	1.5rem = 默认字体大小 (比如： 16px) * 1.5 = 24px

这个默认字体大小是依据你网站当前访问时所使用的浏览器或者其他设备来决定的，对于桌面浏览器默认是16px的字体大小。然后你现在要转换当前元素的字体大小为rem的时候你就可以这样做：

 

1	28px = 28/16 = 1.75rem

为了更方便的进行计算转换，你可以把默认字体大小设置成62.5%或者是10px，这个时候你要计算当前元素字体大小的时候，你就可以这样：

 

1	28px = 28/10 = 2.8rem

rem的浏览器支持

目前大多数浏览器都支持rem单位的字体大小，不过，要想兼容IE7和IE8，你还是需要使用px来做单位。写法如下：

 

1	html { font-size: 62.5%; }

 

1	p { font-size: 15px; font-size: 1.5rem; } /* =15px */