Question

我正在努力建立一个具有响应背景的移动友好型网站。为此，我制作了4种不同尺寸的相同背景：360px宽，600px宽，1000px宽和1500px宽。我使用媒体查询来确定要显示的背景。

＆＃13;

/*------------- Styles for different screen sizes -------------
/* For width smaller than 400px: */
body    {
    background-image: url('../data/background/360.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
}

/* For width bigger than 600px: */
@media only screen and (min-width: 600px){
    body    {
        background-image: url('../data/background/600.png');
       
    }
}

/* For width bigger than 1000px: */
@media only screen and (min-width: 1000px){
    body    {
        background-image: url('../data/background/1000.png');
       
    }
}
/* For width bigger than 1500px: */
@media only screen and (min-width: 1500px){
    body    {
        background-image: url('../data/background/1920.png');
       
    }
}
/*-------------------------------------------------------------*/

＆＃13;

但是，当屏幕小于600像素时，最小背景（360.png）不会显示。当我调整屏幕大小时，所有其他背景都会显示出来。这里的问题是什么？网址是正确的。

Answer 1

css代码完全正常工作。你把元标记放在头部分

尝试使用它会起作用。

 <meta name="viewport" content="width=device-width, initial-scale=1">

把它放在头部。

Answer 2

您可以尝试反转所有内容并使用max-width而不是min。这意味着只有当宽度小于600时才应用max-width: 600 ...而且看到问题的jsbin.com演示也很酷，也许你还有其他更高优先级的东西会覆盖css值你期望的。

Answer 3

您的代码效果很好：JSFIDDLE

唯一的问题可能是：

 background-attachment:fixed;

因为它在大多数手机上都被禁用了。

要解决此问题，您应该添加以下内容：

  @media (max-width: 599px){
      body    {
        background-attachment:scroll;
        background-size: cover;

      }
  }

Answer 4

您可以尝试这些背景属性

body{  background-image: url('../data/background/360.png');background-size:100% 100%; background-position:center center;background-repeat: no-repeat;}

最小的背景没有显示

4 个答案: