CSS媒體查詢沒有迴應

Question

我一直在閱讀很多關於RWD的文章，並且非常想給它一個提供，所以我有一個網站爲朋友建立，並且認爲它會是一個好的測試者。我在YouTube上觀看了一段視頻，說如果你從頭開始構建一個網站，並希望它能夠做出反應，那麼從最小的視口開始構建網站，然後在漫長的過程中擴展網站，這就是我正在做的。

然而，我的第一個CSS媒體查詢：

@media only screen and (min-width: 480px) and (max-width: 767px) { 
body { 
background: #000; 
} 

一旦設備/瀏覽器達到480像素一分鐘寬度和我想要的背景去黑（純粹是出於測試目的），它似乎並沒有響應。

這裏是我的網站代碼：http://jsfiddle.net/F6Xbp/

我原本有一個媒體聲明稱：

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

這是在那裏我開始建設的網站，但我刪除了這個，因爲我以爲當每個視口被識別時，樣式將被覆蓋，所以我可以使用max-width：479px作爲我的基礎起點。

我期待聽到一些回覆，毫無疑問，我在這裏忽略了這麼簡單的事情。

基思:-)

Answer 1

Updated jsFiddle

你需要把你想要的@media查詢中修改代碼，並確保它們不會相互重疊（或至少依次定位到它不一樣，如果他們不管是）。當你有它最底層的媒體查詢被重寫大部分人

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
body { 
    background: #000; 
} 
/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width: 767px) { 
    body { 
     background: red; 
    } 
} 
/* Tablet Portrait size to standard 960 (devices and browsers) */ 
@media only screen and (min-width: 768px) and (max-width: 959px) { 
    body { 
     background: green; 
    } 
} 
/* Smaller than standard 960 (devices and browsers) */ 
@media only screen and (min-width: 959px) { 
    body { 
     background: blue; 
    } 
} 

Answer 2

我做了工作：http://jsfiddle.net/F6Xbp/1/

技術1

@media screen and (max-width: 480px) { 
    body { background-color:black; } 
} 

技術2

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {  
    body { background-color:black; } 
} 

對於max-width和max-device-width之間的差異，請參閱this。