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-100px激活。有谁知道这可能导致什么？

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

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

Answer 2

你可以这样尝试它会对你有用

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

}

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

2 个答案: