html - 媒体查询 Bootstrap 问题

Question

我想在我的网站上加入文字动画。我找到了一个脚本，它可以按设定的时间间隔简单地随机播放文本短语。我真的很喜欢这种效果。我遇到的唯一问题是在移动设备上。我缺乏对媒体查询和 Bootstrap 的理解，但我觉得这可以快速解决。基本上在移动设备上，在桌面上的一行中完全适合的文本在较小的屏幕上不适合在一行中。这导致短语进入第二行，这反过来又使“容器流体”增长，从而产生这种生涩的恼人效果。

我想做的是要么锁定移动设备上的“container-fluid”，这样它就不会跳动或变大，要么让手机上的字体略小一些，这样一切都像它一样放在一行上在桌面上。

这是我的 HTML:

 <section class="bg-primary" id="about">
    <div class="container-fluid">

            <div class="col-lg-8 col-lg-offset-2 text-center">


                <h1 id="textslide"></h1>           

                <h1 id="secondaryHeading">Get Shattr.</h1>


            </div>

    </div>
</section>

这是运行文字动画的脚本:

    var i = 0;

    setInterval(function() {
        $("#textslide").html(quotes[i]);
        if (i == quotes.length - 1)
            i=0;
        else
            i++;
    }, 1.5 * 1000);

我知道这是一个 CSS 问题，但我无法正确获取媒体查询，

我尝试在媒体查询下调用#about:

@media(min-width:768px) {

#about{

    font-size:12px;


    }

虽然这并没有解决它......如果有人遵循它并且可以在控制“容器”方面为我指明正确的方向以便它保持静态将文本转​​到第二行或者只是为了字体都适合移动设备上的一行，这太棒了。

谢谢。

Answer 1

对于移动设备，您应该使用此断点。

@media (max-width: 767px) {
  #about{
    font-size:12px;
  }
}

它是 Bootstrap 中的默认 xs 断点。

它表示如果设备宽度小于 767px 则应用该类。