Question

所以我不知道解决问题的最佳做法是什么。我正在创建一个网页，其中包含一个位于导航栏下方的大型边缘转盘，并且在具有1：3比例图像尺寸的桌面上看起来很棒。在移动设备上，它看起来太小而且很薄，所以我制作了一组比例尺为2：3的新图像，我希望在我的旋转木马上的小屏幕上显示。

我应该怎么做呢？ Javascript改变不同大小的图像？不同端口尺寸的旋转木马隐藏列，一个用于移动设备，另一个用于桌面设备？我只需要知道最有意义/最佳实践的方法来解决这个问题。

我的轮播HTML用于参考：

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <!--<li data-target="#myCarousel" data-slide-to="3"></li>   optional   -->
  </ol>

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="img/carousel/carousel1.jpg" alt="First slide">
    </div>
    <div class="item">
      <img class="second-slide" src="img/carousel/carousel2.jpg" alt="Second slide">
    </div>
    <div class="item">
      <img class="third-slide" src="img/carousel/carousel3.jpg" alt="Third slide">
    </div>
  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

Answer 1

这是使用 @MediaQueries 的可能解决方案。

您可以在 HTML 中创建两个不同的轮播，并使用媒体查询定义要显示的轮播。您可以单独为每个轮播自定义 CSS 以获得正确的大小。

Bootply Example - 将窗口宽度更改为低于/高于1000px以查看更新。

<强> HTML

<div class="container">
  <div class="span8">
    <div id="myCarousel" class="carousel slide wide">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
        <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item">
          <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
          <div class="carousel-caption">
            <h4>First Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="item active">
          <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
          <div class="carousel-caption">
            <h4>Second Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="item">
          <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
          <div class="carousel-caption">
            <h4>Third Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>
    <div id="myCarouselNarrow" class="carousel slide narrow">
      <ol class="carousel-indicators">
        <li data-target="#myCarouselNarrow" data-slide-to="0" class=""></li>
        <li data-target="#myCarouselNarrow" data-slide-to="1" class="active"></li>
        <li data-target="#myCarouselNarrow" data-slide-to="2" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item">
          <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
          <div class="carousel-caption">
            <h4>First Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="item active">
          <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
          <div class="carousel-caption">
            <h4>Second Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="item">
          <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
          <div class="carousel-caption">
            <h4>Third Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarouselNarrow" data-slide="prev">‹</a>
      <a class="right carousel-control" href="#myCarouselNarrow" data-slide="next">›</a>
    </div>
  </div>
</div>

<强> CSS

.wide {
  width: 600px;
}

.narrow {
  width: 480px;
  display: none;
}

@media (max-width: 1200px) {
  .wide {
    display: none;
  }
  .narrow {
    display: block;
  }
}

在bootstrap中使用不同尺寸的图像在不同的设备尺寸上使用

1 个答案: