Làm cách nào để có được các tiêu đề trang của tôi đổi kích thước bằng bố cục đáp ứng?

Question

Vì vậy, tôi có một trang web mà tôi cần phải hoạt động cả trên thiết bị di động và trên máy tính. Tôi đang sử dụng bootstrap-responsive và đã nhận được rất nhiều thứ để làm việc. Hiện tại tôi đang làm việc cho đơn vị anh hùng cho trang đầu. Tôi có tiêu đề trang mà tôi muốn tự động điều chỉnh theo kích thước màn hình. Trang web khởi động chính (http://twitter.github.com/bootstrap/) sử dụng một cái gì đó giống như những gì tôi muốn làm với tiêu đề trang chính của họ. Bất kỳ trợ giúp được đánh giá cao.

Mã liên quan:

<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> 

EDIT: Dưới đây là một ví dụ về nó. http://www.screenlight.tv/ Nếu bạn đổi kích thước cửa sổ của mình trên trang đó, tiêu đề sẽ thay đổi kích thước cho phù hợp. Tôi đã thử nhìn vào nguồn và tôi đang gặp khó khăn trong việc tìm kiếm nó.

Answer 1

Được rồi tôi đã tìm ra một này. Để tham khảo trong tương lai, điều này được thực hiện bằng cách sử dụng thuộc tính @media(max-width: ). Ví dụ: bạn sẽ làm:

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

Hoặc bất cứ điều gì bạn cần làm. Mong rằng điều này sẽ giúp ai đó trong tương lai! Chúc mừng!

Answer 2

Bạn đã cố gắng chuyển đổi nó để

<div class="container-fluid"> 

Answer 3

Như đã nêu here, bootstrap hiện không hỗ trợ kích thước phông chữ đáp ứng ngoài hộp. Các đã được hiển thị @media(max-width:) là con đường để đi.

Answer 4

Nếu đó là ảnh tiêu đề hình ảnh (không có văn bản liên quan), sử dụng `class =" img-responsive "cũng hoạt động. Tức là:

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

Sống mẫu ở đây: http://www.bootply.com/Cc0rdXsJXP