css - Div 的宽度不会因媒体查询而改变

Question

这是 html:

<div id='test'></div>

还有CSS:

#test{
height:100px;
width:100px;
background:red;    
width: -webkit-calc(100% - 100px);
width:calc(100% - 100px);   
}
@media all and (max-width: 500px)
{
.test{
width: 100%;
}
}

本质上，div 的宽度不会因媒体查询而改变(宽度降至 500px 以下)。有什么建议吗？

这是 fiddle :http://jsfiddle.net/rSthC/1/

Answer 1

CSS 中存在错误 - 它应该是 #test 而不是媒体查询中的 .test，因为它是一个 id 而不是一个类。