html - 显示无 不适用于过渡

Question

我已经使用媒体查询来隐藏 iphone 图像并显示桌面图像.....但是他的 iphone 图像没有显示出来......你能告诉我原因吗

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

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



}

Answer 1

需要研究一些可能有帮助的问题：

1. 您没有在 HTML 标记之前声明 doctype，例如

2. 尝试编写您的媒体查询标签，例如“@media screen and (max-width: 767px)”

3. 您有很多在 HTML 标记和 HEAD 标记之间浮动的脚本标记 - 它们应该位于 HEAd 标记内或 BODY 标记内。

那是您在那里进行的一些JavaScript。当要为真实用户使用时，我建议将其全部压缩和压缩。