CSS媒体查询忽略

Question

我想我的页面看上去很好用iphone4和iphone 5.我写了一些媒体的质疑，但似乎它们将被忽略：

@media only screen and (max-device-width: 480px) { 

#gpsMain{ 
    position:absolute; 
    top:25px; 
    left:20%; 
} 

} 
@media only screen and (max-device-width: 320px) { 

#gpsMain{ 
    position:absolute; 
    top:11px; 
    left:20%; 
} 

} 

为什么样式没有应用？这是获得两个iphone的决议的正确方法？

（该查询是我的CSS文件写的最后一件事）

Answer 1

仔细检查，看看是否有一个视一套。不知道它是否重要，但我总是看到媒体查询格式如下：

@-ms-viewport { 
    width: device-width; 
} 

@viewport { 
    width: device-width; 
} 

@media screen and (max-width: 400px) { 
    .list-view .site-content .post-thumbnail { background: none; width: auto; z-index: 2; } 
} 

这是来自2014 wordpress主题。 http://www.responsinator.com/是一个很好的地方，可以仔细检查事物的外观。

Answer 2

尝试改变这个：

@media screen and (max-device-width: 480px) { 

#gpsMain{ 
    position:absolute; 
    top:25px; 
    left:20%; 
} 

} 

@media screen and (max-device-width: 320px) { 

#gpsMain{ 
    position:absolute; 
    top:11px; 
    left:20%; 
} 

}