jquery - 如何根据设备屏幕更改引导轮播中的文本大小

Question

我想根据设备屏幕更改轮播内部文本大小。请帮助我。 下面是代码:

<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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <h2>Hello</h2>
    </div>

    <div class="item">
      <h2>Hello2 sdfd dljdklf dlkj kld lkjkld lkjkld dlkjlkd ljkl dlkjls slkj </h2>
    </div>

    <div class="item">
      <h2>Hello3</h2>
    </div>

    <div class="item">
     <h2>Hello4 djkl jd kljld kjd lkjl d lkjkl lkjlk </h2>
    </div>
  </div>

在这里，我想更改 h2 文本大小，并且所有四个元素的元素高度应该相同。

提前致谢。

Answer 1

考虑使用 CSS Media Queries为此。

一个例子是这样的:

@media (max-width: 992px) {
    .item h2 {
        font-size: 3rem;
    }
}

上面的媒体查询表示，如果屏幕宽度最大为 992px，则元素类中的 h2 的字体大小应为 3rem。

如果屏幕为 993px 或更大，则这不适用。

---

您可以使用多个值:

@media (max-width: 992px) {
    .item h2 {
        font-size: 3rem;
    }
    .item h2 {
        color: red;
    }
    .item h2 {
        text-decoration: underline;
    }
}

但是，上面的示例并不理想，因为它不必要地重复了代码。你显然可以把它浓缩成这样:

@media (max-width: 992px) {
    .item h2 {
        font-size: 3rem;
        color: red;
        text-decoration: underline;
    }
}

---

您还可以使用多个媒体查询:

@media (max-width: 992px) {
    .item h2 {
        font-size: 3rem;
        color: red;
        text-decoration: underline;
    }
}
@media (max-width: 768px) {
    .item h2 {
        font-size: 2.5rem;
        color: blue;
        text-decoration: none;
    }
}

第一个媒体查询说，如果屏幕宽度小于 992px，则元素类中的 h2 的字体大小应为 3rem，应为红色，并应有下划线。

第二个媒体查询说，如果屏幕变得更小，小于 768px，字体大小应该减小到 2.5rem，颜色应该是蓝色，下划线应该被删除。