隐藏 iPhone 屏幕的图像答案

【问题标题】：hide an image for iphone screen隐藏 iPhone 屏幕的图像
【发布时间】：2013-02-07 10:50:57
【问题描述】：

使用媒体查询，我试图隐藏桌面立方体的图像，然后将其替换为立方体的另一个 iphone 图像...... 我可以隐藏 iphone 的桌面图像，但 iphone 图像没有出现..... 如何解决这个问题.....

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

在下面提供我的代码

<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;
      }

【问题讨论】：

标签： html css media-queries

【解决方案1】：

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

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

如果这不起作用，您可以尝试这里提到的更多技术：Transitions on the display: property

【讨论】：