媒体查询样式覆盖父级而不检测

Question

所以我有以下小提琴：http://jsfiddle.net/9vu64/

我目前正在为我的虚拟网站实施我的查询，这些查询工作正常，直到我添加以下内容。正如小提琴中所见，似乎#header在任何分辨率下都适应媒体查询标题宽度。我删除它，它工作正常没问题。我似乎无法找出罪魁祸首。感谢。

@media (min-width: 325px) {
    #contain {
        width:285px;
    }
    #header {
        width:285px;
    }

Answer 1

<强> CSS

使用：max-width

@media (max-width: 325px) {
   #contain {
      width:285px;
   }
   #header {
      width:285px;
   }
} 

另外，我建议使用百分比并给出默认宽度。 例如：

#contain{
   width: yyyypx;
} 

然后进行最大宽度的媒体查询。还有一件事，你正在设备宽度 - 我会建议屏幕宽度