レスキューレイアウトを使用してページヘッダーのサイズを変更するにはどうすればよいですか？

Question

私はモバイルデバイスとコンピュータの両方で機能する必要があるサイトを持っています。私はブートストラップレスポンスを使用しており、多くのことを動かすことができました。現在、私はフロントページのヒーローユニットに取り組んでいます。私は画面サイズに応じて自動スケールしたいページヘッダを持っています。メインのブートストラップサイト（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/ そのページのウィンドウのサイズを変更すると、ヘッダーのサイズがそれに応じて変更されます。私はソースを見てみましたが、見つけにくいです。

Answer 1

オーケーにそれを切り替えるみました私はこの1つを考え出しました。将来参照するには、これは@media(max-width: )プロパティを使用して行われます。たとえば、次のようにします。

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

または何でもする必要があります。これは将来誰かを助けることを願っています！乾杯！

Answer 2

はあなたが

<div class="container-fluid"> 

Answer 3

前述のように、hereでは、ブートストラップは現在、対応するフォントサイズをサポートしていません。既に表示されている@media(max-width:)が行く方法です。

Answer 4

画像ヘッダーの写真（テキストは関係ありません）の場合は、 `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