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）。有什么建议吗？

这是小提琴：http://jsfiddle.net/rSthC/1/

Answer 1

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