Question

我正在尝试在移动时填充背景图像（高度）。当我使浏览器变小时，我的媒体查询似乎并没有开始。任何帮助将不胜感激。这就是我的css的样子：

#main {
    background-image:url(../images/cc.jpg); 
    height:650px; background-size:cover; 
    background-position:0 -210px; 
    background-repeat:no-repeat;
}

#main .row {
    margin-top:200px;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  #footer {
    font-size:10px;
  }

    #main {
        background-image:url(../images/cc.jpg); 
        height:100%; 
        background-size:cover; 
        background-repeat:no-repeat;
    }

    #id{ margin-top:90px; }

    #main .row {
        margin-top:100px;
    }

}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { 
  #footer {
    font-size:10px;
  }

    #main {
        background-image:url(../images/cc.jpg); 
        height:100%; 
        background-size:cover; 
        background-repeat:no-repeat;
    }

    #id{ margin-top:90px; }

    #main .row {
        margin-top:100px;
    }



}

如果您想查看页面的内容，请输入以下网址：

http://bit.ly/10DvqBe

谢谢大家的帮助!!我完全被这个困扰了。

d

Answer 1

删除background-position规则，或者如果您仍希望将其用于桌面，请将其重置为0。

那里有很多重复的代码。你可以这样做：

#main {
    background-image:url(../images/cc.jpg);
    height:650px; background-size:cover;
    background-position:0 -210px;
    background-repeat:no-repeat;
}

#main .row { margin-top:200px; }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  #footer { font-size:10px; }
  #main { background-position: 0; }
  #id{ margin-top:90px; }
  #main .row { margin-top:100px; }
}

Answer 2

更改为background-position: center;，这应该可以解决问题。此外，您应尽可能尝试使用一行代码background: url(../images/cc.jpg) no-repeat center center fixed;。

Answer 3

如果要在桌面上测试媒体查询，则应使用 min-width或max-width 而不是min-device-width或max-device-width。

这样做：

@media only screen and (min-width : 320px) and (max-width : 480px)

min-device和max-device指的是屏幕的ACTUAL分辨率（即：1280x800），而不是浏览器的大小。这就是为什么在调整浏览器和在您的计算机上进行测试时，您的媒体查询无法解决的问题。

移动时Bootstrap背景图像没有填满空间

3 个答案: