谈谈css中px ， em，及rem

    今天查了查css中的px，em，rem，在这做个总结。

px

优点：精确，兼容性良好。

缺点： IE无法调整使用px作为单位的字体大小。

使用IE浏览器（或内核）的网民无法调整使用px的网页字体的大小，影响用户体验。

em

特点：

1. 任意浏览器的默认字体高都是16px，字体未经调整的浏览器1em=16px；
   
2. em的值并不是固定的，继承父级元素的字体大小。
   

优点：

相对单位，在IE浏览器中可以调整网页字体大小。

缺点：

因其是基于父元素字体大小的相对的值，换算麻烦，字体大小须逐层复合，若字体大小重复声明，易造成字体大小的混乱，

例如：想得到子元素字体大小为24px，父元素声明：font-size:1.5em；子元素也设置：font-size:1.5em; 

那么子元素字体的实际大小则是16*1.5*1.5=36px。

rem

特点：

1. css3新增相对单位；
2. 其大小基于html根元素。

优点：

1. 相对单位，可以在IE浏览器中调整网页字体大小；
2. 基于html根元素，易于计算和维护。

缺点：不支持IE8及以下版本浏览器。

使用范例：

html{font-size: 625%; /* 100 ÷ 16 × 100% = 62.5%  */}
body{font-size: 0.14rem; /* 0.14 × 100px = 14px */}
h1{font-size: 0.24rem; /* 0.24 × 100px = 24px */}

Ps. 一些网站设置html的font-size：62.5%，这样的缺点是有的浏览器的字体设定最小的为12px，设置成62.5%会自动计算成12px（如中文版chrome，当然也可以解决，也许以后会总结怎样解决 ）。

为了使其兼容IE6-8，可以px及rem一同使用，看具体情况怎样适合。例：

p{
font-size:14px;
font-size:0.14rem;
}

不过据说，通常在标题，正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景，rem 可能会导致布局错位，如下链接所述：

http://www.woshipm.com/ucd/24110.html