2012-07-17 106 views
0

我有以下媒體查詢規則:媒體查詢奇怪的行爲

  1. @media only screen and (max-width: 854px), only screen and (max-device-width: 854px)(用於設備< = 854px)

  2. @media only screen and (min-width: 855px), only screen and (min-device-width: 855px)(用於設備> 854px)

這很奇怪,但Chrome(也可能是其他瀏覽器)同時使用此規則(例如寬度爲800像素時)(檢查屏幕)。怎麼了?
stange media-queries behaviour

回答

1

他們回落到相同的規則,因爲你正在使用device-width,爲device-width目標設備的物理寬度的條件所以如果條件滿足那麼這將被應用的唯一規則(不管你調整您的瀏覽器到任何寬度)。從媒體查詢中刪除device-width條件,這應該可以解決您的問題。

要了解更多關於device-widthwidth之間的差異,請參考以下鏈接:http://www.w3.org/TR/css3-mediaqueries/#media1

0

謝謝你,蘇維。
我通過改變瀏覽器的寬度(而不是通過改變屏幕分辨率)來測試媒體查詢規則。因爲我的瀏覽器寬度小於854px,因此應用了以下規則 - @media only screen and (max-width: 854px)。因爲我的屏幕分辨率超過了854px,因此應用了以下規則 - only screen and (min-device-width: 855px)