如何在响应模式下交换移动/桌面上的图像

Question

我有以下文件夹结构的桌面和手机图像列表:

img:
    img-1.png
    img-2.png
    img-3.png
    img-4.png
    img-5.png
    img-6.png

img/mobile:
        img-1.png
        img-2.png
        img-3.png
        img-4.png
        img-5.png
        img-6.png

我可以使用以下代码切换桌面img-1.png:

<span id="switcher">
   <img id="houdini" src="img/img-1.jpg" alt="">
</span> 

<span id="switcher2">
   <img id="houdini2" src="img/img-2.jpg" alt="">
</span>

<span id="switcher3">
   <img id="houdini3" src="img/img-3.jpg" alt="">
</span>

<span id="switcher4">
   <img id="houdini4" src="img/img-4.jpg" alt="">
</span>

<span id="switcher5">
   <img id="houdini5" src="img/img-5.jpg" alt="">
</span>

CSS:

@media only screen and (max-device-width: 489px) {
    span[id=switcher] {
        display:block;
        background-image: url(/mobile/img-1.jpg) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    img[id=houdini] {display: none !important;}
}

我怎样才能避免编写上述CSS,每img-1到6...我可以通过/访问ID？

可以!important删除使用？

(必须在IE8上工作)

Answer 1

您可以将桌面/移动设备的每对图像彼此相邻放置,而不是在桌面上使用背景图像,并display通过为其提供以下类来切换其类型:

这里的例子

<img src="http://placehold.it/200/f30" alt="houdini" class="visible-mobile">
<img src="http://placehold.it/200/3f0" alt="houdini" class="hidden-mobile">

.visible-mobile {
  display: none !important;
}

@media (max-width: 489px) {
  .visible-mobile {
    display: inline !important;
  }

  .hidden-mobile {
    display: none !important;
  }
}