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未在指定宽度上激活。为什么不？

回答

相关问题