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 的宽度不会改变（宽度低于 500 像素）。有什么建议么？

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

Answer 1

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