rem

在页面开发中，之前比较常用的css尺寸单位就是px和em。

px： 像素，是相对长度单位，相对显示屏分辨率而言，字体大小固定，浏览器无法自定义设置字体大小；em：指的是字体高，相对父元素的尺寸而言，一般body默认为16px，则1em=16px。em中计算公式如下：

元素字体大小计算：1/父元素的font-size * 需要转换的像素值 = em值 ;

元素没有设置字体大小时，padding、border、width、margin等值计算公式：1/父元素的font-size * 需要转换的像素值 = em值；

元素设置了字体大小时，padding、border、width、margin等值计算公式：1/元素的font-size * 需要转换的像素值 = em值；

css3引入了单位rem，rem指的是相对于根元素的字体单位大小，对于em来说，rem更加方便，都适用于响应式布局。目前除了IE8及之前版本外，其它浏览器都支持rem，可以在rem之前用px设置字体来兼容IE8及之前浏览器，虽然rem带来了很多便利，但是rem也存在一些问题。

rem中，使用小数时，会存在一些问题。例如：iphone6中，1.75rem*1.75rem，在浏览器渲染尺寸是1.75*37.5=65.625px；但真实情况却是这样的，有些宽度为66px，有些为65px，顺序上也是没有规律，经过分析发现，浏览器在渲染时所做的舍入处理只是应用在元素的渲染尺寸上，其真实占据空间依旧是原始大小,也就是说，一个元素尺寸为0.625px,那么它的渲染尺寸就是1px，多余的0.375px由其临近元素填充。

目前rem应用遇到较多的问题就是background-image的问题，因为小数使得背景被截掉一部分，其实在使用background-image时，给背景图留一点空白间隙就可以解决这个问题了。小数像素可能还会有尚未遇到的一些坑，但是在了解了浏览器如何处理小数像素的原理后，这类问题就变得很好解决了。