媒体查询 div 背景图片变化怪异

Question

我有一个带有简单背景图像的 div。我需要更改图像及其显示方式以提高响应能力，但是当我调整浏览器大小时，我看到一些奇怪的行为，封面图像首先不显示或显示为碎片，甚至当我第二次调整大小时如果它只是一个像素变化，它就会开始显示。以任何大小刷新浏览器都可以。知道为什么会发生这种情况以及如何解决吗？

.mydiv {
  background: url(../img/background1.jpg) no-repeat;
  background-position: center center;
}

@media (max-width:992px) {
  .mydiv {
    background: url(../img/background2.jpg) no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }
}

编辑：我注意到当我检查元素并触摸 .mydiv 时，怪异消失了，所以我想知道是否有办法让 Javascript 或 JQuery 刷新我的元素或类似的东西。

Answer 1

我马上就看到了一些事情：

1. 在@media 和(max-width:992px) 之间添加一个空格
2. 您使用的是mydiv 元素，还是应该是类名或ID 名？如果它是类或 id，那么您需要在 CSS 中将其称为 .mydiv（类）或 #mydiv（ID）。

Here's a working jsfiddle.

Answer 2

正确重写媒体查询，添加空格，如果您希望更清晰，请使用@media，它本身隐含定义@media all，但您也可以使用参数，但您需要添加

在这种情况下，我仅出于测试目的使用 768px。用你需要的值更新它。

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

      }

演示代码

html,body{
    height:100%;
}
.mydiv {
    width:100%;
    height:100%;
  background: url('http://placehold.it/1000x1000/FFF/000') no-repeat;
  background-size:cover;
  background-position: center center;
}

@media (max-width: 768px) {
  .mydiv {
    background: url(http://placehold.it/1000x1000/) no-repeat;
    background-position: center center;
  }
}

查看此演示：

https://jsfiddle.net/a_incarnati/v575uvyb/5/