简单的说说 px 、em 和 rem 的区别
* 个人初步认知：
在前端页面开发初期，特别是给页面添加样式的时候，免不了碰到px与em，
简单的认为两者都可以设置字体的大小，但也有一些细微的差别，px直接就是像素值，取值可正可负，可以设置字体的大小，也可以设置元素的宽高属性，定位的坐标等，特别需要注意的是，在Chrome浏览器中，默认的最小字体是12px，即使设置字体大小低于12px，也是无效的；
而em可以简单理解为一个单位，它的大小并不固定，它继承父类元素的字体大小，通常成倍数关系，即如果父类元素字体为12px，设置字体大小为1.5em即为18px；
rem是 root em的意思，它是虽然也是一个长度单位，但它指向元素的根
PX:
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。
EM:
em就是根据基准来缩放字体的大小。em实质是一个相对值，而非具体的数值。
这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，这个网站不错，输入数据就可以px和em相互计算。
Rem:
em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。
而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
浏览器的兼容性
除了IE6-IE8，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
px， em ， rem 的区别？
1.px 是一个绝对字体的大小， em则是基于基数来计算出来的相对字体大小，这个基数是需要乘以当前对象从其父级遗传字体大小。
1.5em = 父级字体大小 * 1.5 = ？
- em 存在什么问题？
就是在CSS中想要知道当前元素的字体大小所遗传的是哪个父级元素的字号？ - 解决方案？
rem的出现就很好的解决了这个问题，rem 是基于根节点（比如html）的字体大小进行计算的
1.5rem = 默认字体大小（比如：16px）* 1.5 = 24px
为了更方便的进行计算转换，你可以把默认字体大小设置成62.5%或者是10px，这个时候你要计算当前元素字体大小的时候，你就可以这样：
28px = 28/10 = 2.8rem
rem的浏览器支持
目前大多数浏览器都支持rem单位的字体大小，不过，要想兼容IE7和IE8，你还是需要使用px来做单位。写法如下：
html { font-size: 62.5%; }
p { font-size: 15px; font-size: 1.5rem; } /* =15px */
网友评论