javascript - 如何在手机中更改背景图像？

Question

我正在开发一个带有背景图片的简单 html 页面。在桌面上，背景显示完美，但我想在移动设备上更改背景图片。

html和css如下:

HTML

<div class="pc-img" ></div>
<div class="mobile-img" ></div>

CSS

body
{
    margin:0px;
    padding: 0px;
}

.pc-img {
     min-height: 95% !important;
    height: 100%;
    width: 100%;
    background-image: url('http://www.laminaresearchcenter.com/images/comingsoon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
}
}

.mobile-img
{
    display: none;
}

@media only screen and (max-width: 384px) {

.mobile-img
    {
         background: url('http://www.outbarga.in/images/comingsoon.jpg');

       visibility: visible;
}

.pc-img
{
    visibility: hidden;
}
}

Answer 1

您不需要 2 个类和 2 个 div 来执行此操作。 您可以为一个 div 设置 @media 查询，并更改他的属性。

CSS:

.pc-img {
  width: 100%;
  height: 400px;
  background: #000;
}

@media screen and (min-width: 100px) and (max-width: 480px) {
  .pc-img {
    background: purple;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .pc-img {
    background: yellow;
  }
}

看这个演示: Demo 1

顺便说一句，如果您想要两个 div，请执行以下操作: Demo 2

.pc-img {
  width: 100%;
  height: 400px;
  background: #000;
}
.device-img {
  background: steelblue;
  width: 100%;
  height: 400px;
}
@media screen and (min-width: 100px) and (max-width: 480px) {
  .device-img {
    display: block;
  }
  .pc-img {
    display: none;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .device-img {
    display: block;
  }
  .pc-img {
    display: none;
  }
}