Ширина 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 в запросе медиа, как это идентификатор, а не класс.