這兩個媒體查詢有什麼區別？

Question

我是新來媒體查詢和搜索谷歌，但我只是發現網站提到這一點，但沒有描述他們的實際意思。

是什麼這之間的區別：

@media screen and (max-width: 767px), 
screen and (max-device-width: 767px) 

和：

@media screen and (max-width: 767px) 

的是這兩者之間的區別？第一個目標頁面內容寬度和設備寬度或所有方向（水平還是垂直）？我很困惑。

Answer 1

假設你不問有關媒體功能width VS device-width，而是兩種介質之間的差別查詢自己的區別在於：它是有用的知道，在查詢功能逗號作爲邏輯OR。因此，第一個查詢說，

「如果這是一個屏幕，767px一個最大寬度，或者如果它是用767px一個最大的設備寬屏幕......」

與第二個查詢其只查詢最大寬度。在用逗號查詢的時候，第一個會被評估，第二個會被評估，如果其中任何一個都是真的，那麼封閉的CSS將被應用。

見http://www.w3.org/TR/css3-mediaqueries/#media0

至於如何寬度和設備寬度工作，PPK的http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html仍然是，爲什麼人們可能希望避免在媒體查詢中使用設備寬度，以及良好的一個非常有用的閱讀解釋差異。