1

メディアクエリを使用してデスクトップの画像を非表示にし、iPhone の別の画像に置き換えて、iPhone デバイスでより鮮明に再現しています

しかし、display noneを指定すると、画像が非表示になりません

http://jsfiddle.net/Ww6PN/

以下の私のコードを提供する

@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>
4

1 に答える 1

0

これはあなたが望むものかもしれません:
http://jsfiddle.net/panchroma/6vFfy/

最初のスライドを見ると、ウィンドウが 767 ピクセルを超える場合、デスクトップ イメージ (赤い境界線) が表示されます。画面が狭い場合は、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;
}

}
于 2013-01-11T04:38:53.230 に答える