html - CSS 媒体查询未在指定宽度处激活。为什么不？

Question

我有一个横跨整个页面(100% 宽度)的栏，其中有一个子容器，横跨父容器宽度的 80%。

我有以下 CSS 媒体查询应该将子容器的宽度从 80% 增加到 100%:

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

但是，使用我的 chrome 开发人员工具给我的尺寸，查询在宽度为 990px​​ 时生效。不是 900px。我所有的媒体查询都会发生这种情况；他们都比应有的时间早激活了 80-100 像素。任何人都知道这可能是什么原因造成的？

Answer 1

这是格式错误。

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

如果你想在另一个元素中调用一个元素，不要打开两个元素，只需指定你想编辑或更改哪个父元素中的哪个元素。