em相对父级元素来计算的。

如果html结构是：.box>.test,box字体大小为14px，test设置字体大小为2em，那么test字体大小为28px。

但是，这里响应式用的em，参考谁呢？测试下，使用火狐响应式开发工具。

html:

lalala

html
{

font-size: 18px;

}

body
{

font-size: 24px;

}

@media screen and (min-width: 20em)
{

body
{
    height: 400px;        
    height: 600px; 
    color: orange;
}

}
我以为参考的是body或者html的字体大小，但测试结果并非如此。而是默认的16px。。。
也就是说，此处的min-width计算出来是20*16px。

比em更舒服的是rem，根元素html。通常根元素默认字体大小为16px，这样我们就不用管其他的继承影响了，只要针对根元素html的16px去计算即可。基于此，可以用sass函数来做。

$baseSize:16;
@function px-to-rem($size){
@return $size*1rem/$baseSize;
}
调用：

.box { font-size:px-to-rem(12); width:px-to-rem(220); }