css中px、em、rem区别与使用

1.px与em

px: 方便但是在浏览器中放大或是缩小页面，或是改变浏览器字体大小时，页面的布局会被打乱。

em : 可以解决px的问题，但是在进行任何元素设置时，需要知道其父类的大小，很容易出错，且不方便。

两者换算方法：
一般都是以的“font-size”为基准,浏览器默认大小为16px.

body{

    font-size:62.5%; //10 ÷ 16 × 100% = 62.5%
}

h1{

    font-size:2.4em;//2.4em × 10 = 24px
}
p{

    font-size:1.4em;//1.4em × 10 = 14px
}
li{
    font-size:1.4em;//1.4em × 10 = ??

    /*因为不知其父类元素的大小，值可能是1.4或是20px，值是不确定的*/
}

2.px与rem

rem： 可以解决em的问题，但是IE6~IE8的浏览器是无法兼容的

两者换算方法:rem是以< html >的“font-size”作为基准

html{

    font-size:62.5%; //10 ÷ 16 × 100% = 62.5%
}

body{

    font-size:1.4rem;//1.4em × 10 = 14px
}
p{

    font-size:2.4rem;//2.4em × 10 = 24px
}

解决兼容性的办法：在IE6~IE8浏览器中使用px，其他浏览器中使用rem