Question

我有以下标记，并且需要在不同的断点处设置两个不同的背景图像。

    try {
       // code that throws null pointer excpetion that crashes the server
    }
    catch(NullPointerExcpetion npe) {
       //handle error
    }

我只能在HTML标记的<body> <main> <div class="intro" style="background-image: url(https://s3.amazonaws.com/my_mobile_image);"></div> <section> .... </section> <section> .... </section> </main> </body>属性中设置背景图片。如何渲染适合移动设备的背景图像和适合桌面的其他图像？

我应该有两个不同的div，例如设置style在桌面断点上不显示任何内容，而设置intro-mobile在移动断点上不显示吗？

intro-desktop

Answer 1

您可以使用CSS media queries。

例如（假设您想在<768像素宽的屏幕上显示移动背景）。

.intro {
    background-image: url(https://s3.amazonaws.com/my_mobile_image);
}

@media screen and (min-width: 768px) {
    .intro {
        background-image: url(https://s3.amazonaws.com/my_desktop_image);
    }
}

或者，如果需要将其包含在style属性中，则可以使用媒体查询来隐藏另一个div。

.intro-desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    .intro-desktop {
        display: block;
    }

    .intro-mobile {
        display: none;
    }
}

此外，如果您可以在标记中包含<style>，则可以执行以下操作：

<style>
.intro {
    background-image: url(https://s3.amazonaws.com/my_mobile_image);
}

@media screen and (min-width: 768px) {
    .intro {
        background-image: url(https://s3.amazonaws.com/my_desktop_image);
    }
}
</style>

如何根据屏幕宽度渲染不同的背景图像？

1 个答案: