如何为移动设备替换 header 背景图片 - bootstrap

Question

我不知道如何为移动用户提供不同的图像 - 我的横幅变得太小而无法阅读。我对此有点陌生。在以下 css 代码的帮助下，我成功地使用 bootstrap 将横幅图片放在了应该放置的位置：

  .jumbotron{
    margin-top: 5px;
    background-image: url(obr/head.jpg);
    background-size: cover;
    height: 100%;
    background-size:100% auto;
    background-repeat: no-repeat;
    min-height: 320px;
  }

和html

<header class="jumbotron">

</header>

请注意，我必须设置 min-height: 320px;因为这是以正确尺寸显示横幅的唯一方法（除了在 header 标签中添加 br's 之外）。在移动设备上，横幅很小，难以阅读，并且由于 min-height..

也会产生白色 space

我尝试使用此 css 代码为移动用户提供不同的图像：

/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
  .jumbotron{
  background-image: image-url("obr/head.jpg");
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
  .jumbotron{
  background-image: image-url("obr/head.jpg");
}
}

但运气不好。谁能帮我解决这个问题？我更喜欢易于遵循的步骤。非常感谢。

Answer 1

媒体查询不以 # 开头，它们以 @ 符号开头。

background-image: image-url("obr/head_mobile.png"); 不是属性。使用 background-image: url("img-path");。然后就可以正常工作了。

示例

@media only screen and (max-width: 500px) {
  body {
     background-color: blue;
  }
}

您的代码更正：

 /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .jumbotron {
            background-image: url("obr/head.jpg");
        }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .jumbotron {
            background-image: url("obr/head.jpg");
        }
    }

Learn more about media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

。

See the working code here: https://codepen.io/manaskhandelwal1/pen/NWqdOPZ

如何为移动设备替换 header 背景图片 - bootstrap

How to replace header background image for mobile - bootstrap

html

css

header

background-image