html - hide an image for iphone screen

Question

Using media queries i am trying to hide a image of cube for desktop and then replace it with another iphone image for the cube.... i am able to hide the desktop image for iphone but the iphone image is not appearing..... how to fix the issue.....

http://jsfiddle.net/QYvrt/27/

http://jsfiddle.net/QYvrt/27/embedded/result/

providing my code below

<div class="desktopContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">desktopImage</div>

 <div class="iphoneContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://intra.defie.co/images/cubes/demoImage.png">iphoneImage</div>






@media (max-width: 767px) {

#rightSlider{
    border: 1px solid red;
}

#rightSlider{
            display:none !important;
          }
#rightSlider{ 
            display:inherit !important;
          }

.desktopContactImage{

            display:none !important;
          }

.iphoneContactImage{
            display:inherit !important;
            border: 1px solid red;
          }



}

#slidenav{
            display:none !important;
          }
#slidenav{ 
            display:inherit !important;
          }

}

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

#rightSlider{
    border: 1px solid green;
}


}






/* Demo styling */
#rightSlider{
        display: none;
      }
#slidenav{
        display: none;
      }



     .iphoneContactImage{
        display: none;
      }

Answer 1

而不是使用 display:inherit !important 来取消隐藏您可能想要尝试的元素

.iphoneContactImage{
  display:block;
  border: 1px solid red;
}

如果这不起作用，您可以尝试这里提到的更多技术：显示器上的转换：属性