如何讓頁面標題使用響應式佈局調整大小？

所以我有一個網站，我需要在移動設備和電腦上都能正常工作。我使用bootstrap-responsive，並且有很多東西可以工作。目前，我正在爲頭版英雄單位工作。我有一個頁眉，我希望根據屏幕大小進行自動縮放。主引導站點（http://twitter.github.com/bootstrap/）使用了我想要對其主頁面標題進行操作的內容。任何幫助表示讚賞。如何讓頁面標題使用響應式佈局調整大小？

相關代碼：

<div class="container"> 
     <div class="hero-unit"> 
      <div class="page-header"> 
       <h1>Page Header</h1> 
      </div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu dolor, dictum scelerisque gravida nec, vulputate in odio. Pellentesque sagittis ipsum et mauris elementum vitae molestie ipsum blandit. Mauris tempus hendrerit arcu, sed vestibulum justo tempor a. Praesent sit amet odio ligula. Morbi sit amet leo vestibulum neque bibendum ullamcorper sed ut ante. Vestibulum id diam quis ipsum aliquet vestibulum. Donec vulputate auctor pharetra.</p> 
      <a href="#" class="btn btn-large btn-primary">Learn More</a> 
     </div> 
    </div>

編輯：下面是它的另一個例子。 http://www.screenlight.tv/ 如果您在該頁面上調整窗口大小，則表頭會相應調整大小。我嘗試過看看源代碼，而且我很難找到它。

來源

2012-03-11 Willem Ellis

發佈一些相關的代碼，所以我們可以來看看。 – 2012-03-11 00:46:38

好吧，我發佈了一些 – 2012-03-11 00:53:03

Dd，您將響應式CSS添加到您的頁面？它不包含在默認的CSS中。 – coreyward 2012-03-11 01:05:29

好吧，我已經想通這一個。爲了將來的參考，這是使用@media(max-width: )屬性完成的。例如，你會這樣做：

@media(max-width: 480px) { 
    h1 { 
    font-size: 12pt; 
    } 
}

或者你需要做的任何事情。希望這有助於未來的人！乾杯!

來源

2012-03-11 01:51:48

你試過它切換到

<div class="container-fluid">

來源

2012-03-11 01:19:14

對不起，它應該是容器流體。我複製了自己的bootstrap樣式表，它本質上是bootstrap.css和bootstrap-responsive.css，它們被嵌入到一個文件中，然後嘗試它並且可以正常工作，但我仍然不明白爲什麼我的工作不起作用。 – 2012-03-11 01:23:13

你有沒有在這個網上有我們可以去看看？ – 2012-03-11 01:31:31

如注意到here，引導程序當前不支持響應字體大小。已經顯示的@media(max-width:)是要走的路。

來源

2013-01-05 03:10:45 Drew

請解釋您的意思是「已經顯示...」和/或添加更多代碼來演示解決方案。 – gfullam 2016-11-07 18:26:19

如果它是一個圖片頭像（不涉及文本），使用`class =「img-responsive」也是可行的。即：

<div class="container-fluid"> 
<div class="row"> 
<img src="/images/sample_photo.jpg" class="img-responsive"> 
</div> 
</div>

現場樣品在這裏：http://www.bootply.com/Cc0rdXsJXP

來源

2015-05-26 03:57:19 SM23

如何讓頁面標題使用響應式佈局調整大小？

回答

相關問題