Question

我正在使用媒体查询来隐藏桌面图像并将其替换为iphone的其他图像，以便在iphone设备中重现更清晰

但是当我给出显示时，它不会使图像隐藏

在下面提供我的代码

@media (max-width: 767px) {
          body {
          /*
            padding-right: 20px;
            padding-left: 20px;
            */
            padding-top: 0px;
          }
          .da-dots{
            width: 308px;
          }
          .navbar-fixed-top,
          .navbar-fixed-bottom,
          .navbar-static-top {
            margin-right: -20px;
            margin-left: -20px;
          }
          .container-fluid {
            padding: 0;
          }
          .dl-horizontal dt {
            float: none;
            width: auto;
            clear: none;
            text-align: left;
          }
          .dl-horizontal dd {
            margin-left: 0;
          }
          .container {
            width: auto;

          }
          .marketing{
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 12px;
          }
          .footer{
            font-size: 12px;

          }
          #iphoneSolutionContent{

            margin-left: 0px;
          }
          .desktopSliderImage{
            display: none;
            border: 1px solid red;
          }


        <div class="container">

                        <div id="da-slider" class="da-slider" style="">
                          <div class="da-slide" style="">
                            <h2>
                              <img class="desktopSliderImage" src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="desktopImage" />
                              <img class="iphoneSliderImage" src="http://www.defie.co/designerImages/banner1_iphone.jpg" alt="iphoneImage" />
                            </h2>
                            <div class="da-img">
                              <img class="desktopSliderImage" src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="desktopImage" />
                              <img class="iphoneSliderImage" src="http://www.defie.co/designerImages/banner2_iphone.jpg" alt="iphoneImage" />
                            </div>
                          </div>
                          <div class="da-slide" style="">
                            <h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01" /></h2>
                            <div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01" /></div>
                          </div>
                          <div class="da-slide" style="">
                            <h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01" /></h2>
                            <div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01" /></div>
                          </div>
                          <nav class="da-arrows" style="width: 100%">
                            <span class="da-arrows-prev"></span>
                            <span class="da-arrows-next"></span>
                          </nav>
                        </div>
                          </div>

      </div>

Answer 1

这可能是你想要的：
http://jsfiddle.net/panchroma/6vFfy/

如果您查看第一张幻灯片，如果您的窗口高于767px，则会显示桌面图像（带有红色边框）。对于较窄的屏幕，它显示iPhone图像（带有蓝色边框）

CSS

/* for window widths > 767px
show desktop image and hide iphone image */

img.desktopSliderImage{
border:solid red 1px;
}
img.iphoneSliderImage{
border:solid blue 1px;
display:none !important;
}

/* for window widths 767px and less
hide desktop image and show iphone image */

@media (max-width: 767px) {
img.desktopSliderImage{
border:solid red 1px;
display:none !important;
}

img.iphoneSliderImage{
border:solid blue 1px;
display:inherit !important;
}

}

媒体查询iphone图像隐藏

1 个答案: