Html CSS媒体查询未按指定宽度激活。为什么不呢？

我有一个横贯页面的条（100%宽度），其中有一个子容器，其宽度为父容器宽度的80%

我有一个CSS媒体查询，它应该将子容器的宽度从80%增加到100%：

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

---

然而，使用我的chrome开发者工具提供给我的维度，这个查询在990px的宽度上生效。不是900像素。我的所有媒体查询都会出现这种情况；他们都比应该的更早激活了80-100px。有人知道这是什么原因吗

这是格式错误的

 @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%; }

---

如果要调用另一个元素中的某个元素，请不要同时打开这两个元素，只需指定要编辑或更改父元素的元素。

您可以这样尝试，它对您有效

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

}

---

很抱歉，我忘了说明我在使用sass。让我来编辑这篇文章。“这是格式化错误的。”是的，你可能想将它格式化为一个正确的代码块，而不是使用反勾号…我刚刚创建了一个演示，它工作正常。您指的是显示在右上角的尺寸吗？@Tushar fiddle工作正常。我想在这个底部还有一个媒体查询定义，那就是覆盖这个。