页面布局，将元素的min-width设置为em的形式是什么意思？

Question

雅虎的pure框架将元素的宽度设置为em的形式，这里的em是什么意思呢，是父元素font-size的倍数吗？
@media screen and (min-width: 35.5em)
@media screen and (min-width: 48em)
为什么我将body元素的font-size的大小改为40px、80px不同的值，div布局的断点还是一样的呢？

Answer 1

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

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

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

html:

html<h1>lalala</h1>

css:

csshtml
{
    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函数来做。

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

调用：

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

Answer 2

父级节点的em会影响到子级

body一般情况下是别人的父级

但是这里的media screen比它还高一些

Answer 3

我觉得这个答案可能对你有所帮助。
em是个相对值而不是绝对值。
http://segmentfault.com/blog/news/1190000000388743