媒体查询引导问题

Question

我正在尝试在我的网站上包含一个文本动画。我找到了一个脚本，它只是以设定的间隔在文本短语中随机播放。我真的很喜欢这种效果。我遇到的唯一问题是在移动设备上。我对媒体查询和引导缺乏了解，但我觉得这可能是一个快速解决方案。基本上，在移动设备上，在桌面上一行上完全适合的文本不适合在较小屏幕上的一行。这导致短语进入第二行，进而使"容器流体"增长，从而产生这种生涩的烦人效果。

我想做的是将"容器流体"锁定在移动设备上，使其不会跳跃或变大，或者使手机上的字体大小略小，以便所有内容都适合一行，就像在桌面上一样。

这是我的 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;
  }
}

它是引导程序中的默认 xs 断点。

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

Answer 2

Zcarpman，就像Yuyokk向您展示的那样，您需要如何使用max-width:。
您还需要定位 <h1> .
尝试使用这个...

<style>
#about h1{
    font-size:26px;
}    
@media(max-width:768px) {
#about h1{
    font-size:12px;
}
}
</style>