我應該使用什麼（min-device-width）和（min-width）？

Question

我正在對RWD（響應式網頁設計）進行一些測試，並正在爲最常見的斷點進行掃描。我碰到這樣的：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
body { 
background-color: #7763a5; } 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
body { 
background-color: #011C40; } 
} 

@media only screen and (min-width : 1224px) { 
body { 
background-color: #3957FC; } 
} 

我嘗試（使用Chrome）調整我的瀏覽器窗口，並發現沒有任何的風格需要除了一個與(min-width : 1224px)屬性效果。

爲什麼會發生這種情況，我應該如何測試便攜式設備的樣式？另外，寫這樣的其他設備的條件語句可以嗎？

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 

} 

因爲最後的目的是桌面只是寫沒有「設備」的一部分，在其他聲明中提到。

我回顧了這個問題difference between max-width and max-device-width。爲了公平起見，我從答案中得到了一些東西，但仍然不知道爲什麼當我調整窗口大小時，我的桌面上的瀏覽器拒絕應用樣式。

Answer 1

您可以使用

@media (max-width: px) {} 
@media (min-width: px) {} 

對於任何規模大小