CSS Media Queries未在指定寬度上激活。爲什麼不？

我有一個橫跨整個頁面（100％寬度）的橫條，其中有一個橫跨父容器寬度80％的子容器。CSS Media Queries未在指定寬度上激活。爲什麼不？

我有以下CSS媒體查詢時應該從80％增加孩子容器的寬度爲100％：

@media screen and (max-width: 900px), screen and (max-device-width: 900px){ 
    #imagebar .container{ 
     width: 100%; 
    } 
}

然而，使用我的Chrome開發者工具給我的尺寸，查詢正在影響990px的寬度。不是900px。我的所有媒體查詢都會發生這種情況;他們都比他們應該提前80-100px激活。任何人都知道可能會造成這種情況？

來源

2014-07-09 Sam D20

我剛剛創建了一個演示http://codepen.io/anon/pen/EkIlt，這是工作的罰款。你是指右上角顯示的尺寸？ – Tushar

@Tushar小提琴工作正常。我想你還有一個媒體查詢定義的底部，這是覆蓋這一個。 –

這是格式錯誤。

@media screen and (max-width: 900px), screen and (max-device-width: 900px){ 
    #imagebar{ 
     .container{ 
      width: 100%; 
     } 
    } 
}

應該是：

@media screen and (max-width: 900px), screen and (max-device-width: 900px){ 
#imagebar .container{ 
     width: 100%; }

如果你想另一個元素中的元素上呼籲，不要打開這兩個元素，只需指定其父母要編輯或更改哪個元素。

來源

2014-07-09 06:19:34 ImAtWar

我很抱歉，我忘了指定我正在使用sass。讓我編輯帖子。「 –

」格式錯誤。「是的，你可能打算把它格式化爲一個合適的代碼塊，而不是使用反引號。 – BoltClock

你可以嘗試這樣它會爲你工作

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    your css here 

}

來源

2014-07-09 06:33:09

CSS Media Queries未在指定寬度上激活。爲什麼不？

回答

相關問題