Question

我想在我的网站上添加文字动画。我找到了一个脚本，它只是按照设定的间隔对文本短语进行混乱。我非常喜欢这种效果。我遇到的唯一问题是移动设备。我对媒体查询和引导程序的理解不足，但我觉得这可能是一个快速修复。基本上在移动设备上，桌面上一行完全适合的文本不适合较小屏幕上的一行。这导致短语进入第二行，这反过来又使容器流体化了＃34;成长会产生这种生涩烦人的效果。

我想要做的是锁定＆＃34;容器流体＆＃34;在移动设备上，它不会跳跃或变大或拥有它，所以手机上的字体大小略小，所以一切都适合在桌面上的一行。

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


    }

这并没有解决这个问题......如果有人遵循这一点并且可以指出我正确的方向控制＆＃34;容器＆＃34;所以它会保持静态，文本会转到第二行，或只是为了使字体全部适合移动设备上的一行，这将是非常棒的。

谢谢。

Answer 1

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

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

它是bootstrap中的默认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>

媒体查询引导问题

2 个答案: