媒体查询与后台URL有关

Question

我的wordpress站点中有一个div的html代码。

<div class="bwpb-column bwpb-video-holder backgr bwpb-colwidth-4 " style="color: rgb(255, 255, 255); text-align: inherit; width: 100%; min-height: 923px; height: 628px; background: url(http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png) 50% 100% no-repeat rgb(255, 255, 255);"><div class="bwpb-overlay" style="background-color:rgba(255,255,255,0.01)"></div><div class="bwpb-column-inner" style="padding: 0px 15px; margin-top: 461.5px;"></div></div>

我所要做的就是设置一些媒体查询，如果有笔记本电脑、平板电脑或智能手机，这些查询会改变这个图像。

经过一些研究，我测试了这个代码，但它不工作

（我已经将这个div的类设置为.backgr）

@media (min-width: 1200px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png") !important;
  }
@media (max-width: 992px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
@media (max-width: 768px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-03.png") !important;
  }

@media (max-width: 481px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-04.png") !important;
  }

有人建议我应该放什么而不是我的代码，这样它就会为手机/平板电脑/笔记本电脑加载其他图片吗？

Answer 1

您忘记在每个媒体查询上加上右括号}。应该是这样的：

@media (min-width: 1200px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png") !important;
  }
}  
@media (max-width: 992px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
}  
@media (max-width: 768px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-03.png") !important;
  }
}
@media (max-width: 481px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-04.png") !important;
  }
}  

Answer 2

每次媒体查询后，都应该关闭括号（}）。

使用这个很好：

@media only screen and (max-width:700px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
}