媒體查詢引導問題

我想在我的網站上包含文本動畫。我發現了一個腳本，它可以在一定的時間間隔內簡單地拖動文本短語。我非常喜歡這個效果。我遇到的唯一問題是在移動設備上。我對媒體查詢和引導的理解不足，但我覺得這可能是一個快速解決方案。基本上在移動設備上，在桌面上的一行上完全適合的文本不適合小屏幕上的一行。這導致該短語進入第二行，這反過來使「容器流體」增長，從而產生這種干擾的惱人效果。媒體查詢引導問題

我想要做的就是在移動設備上鎖定「容器流體」，這樣它就不會跳躍或變大或使其移動電話上的字體尺寸略微縮小，因此所有內容都可以放在一條線上在桌面上。

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


    }

這並沒有解決它雖然...如果有人得出結論，並且可以在關於點我在正確的方向要麼控制的「容器」，所以它會留靜態將文本走到第二線或者只是爲了使字體全部適合移動設備上的一行，這將是非常棒的。

謝謝。

來源

2015-06-16 Zcarpman

嘗試使用'，而不是'＃about'＃texslide'。 – Joseph

對於移動設備，您應該使用此斷點。

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

這是bootstrap中的默認xs斷點。

它說如果設備寬度小於767px應用類。

來源

2015-06-16 23:41:11 yuyokk

Zcarpman，像yuyokk如何表現，你需要如何使用max-width:。
您還需要定位<h1>。
嘗試使用此...

<style> 

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

來源

2015-06-17 00:37:36 AngularJR

媒體查詢引導問題

回答

相關問題