gpt4 book ai didi

html - 媒体查询 Bootstrap 问题

转载 作者:行者123 更新时间:2023-11-28 07:42:39 25 4
gpt4 key购买 nike

我想在我的网站上加入文字动画。我找到了一个脚本,它可以按设定的时间间隔简单地随机播放文本短语。我真的很喜欢这种效果。我遇到的唯一问题是在移动设备上。我缺乏对媒体查询和 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;


}

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

谢谢。

最佳答案

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

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

它是 Bootstrap 中的默认 xs 断点。

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

关于html - 媒体查询 Bootstrap 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30879778/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com