前端常用长度单位（px，em，rem，pt）介绍

px

px(pixel)其实应该算是我们最熟悉的长度单位了，是相对屏幕分辨率而言，也是经常被作为其他单位的基准。这个px和物理设备的像素是有区别的，为了保证在不同设备上视觉效果基本相同，px是采用参考像素的,根据css的规范上来看，1px在电脑显示器上看，大概是1/97英寸长。

em

em(font size of the element) 是相对于当前元素的字体大小(font-size)属性值计算出来。由于浏览器默认字体大小是16px，则在默认情况下1em = 16px。如果当前元素没有设置字体大小就依赖其父元素的大小。如果其父元素的大小也没有显式的font-size，则向上寻找直至找到能进行计算的元素。

rem

rem(font size of the root element)和em有点类似，不过是相对根元素进行计算的。只要在html元素上指定了其font-size大小，后面的元素都将使用这个大小作为基准进行计算。兼容性方面，目前除了IE8之外，所有浏览器基本都已支持rem了。

fr

 fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。