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

【问题标题】：how to change the text size in bootstrap carousel according to the device screen如何根据设备屏幕更改引导轮播中的文本大小
【发布时间】：2015-07-17 10:59:25
【问题描述】：

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

<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 文本大小，并且项目高度应该是所有四个项目的共同点。

提前致谢。

【问题讨论】：

标签： jquery css

【解决方案1】：

考虑为此使用CSS Media Queries。

举个例子：

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

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

如果屏幕为 993 像素或更大，则不适用。

您可以使用多个值：

@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，item 类中的 h2 的 font-size 应该是 3rem，应该是红色，并且应该有下划线。

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

【讨论】：