HTML/CSS - điều chỉnh kích thước phông chữ để lấp đầy chiều cao và chiều rộng của bố mẹ

Question

Tôi có phần tử <div> thay đổi kích thước khi cửa sổ trình duyệt đổi kích thước.

Bên trong <div> Tôi có một đoạn văn bản:

<div style="width:80%; height:80%; margin:10%;"> 
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p> 
</div> 

Tôi muốn các văn bản để thay đổi font-size như tôi thay đổi kích thước <div>, do đó văn bản sẽ occuypy 100% của không gian có sẵn.

Làm cách nào để đạt được hiệu ứng này?
Nó sẽ có tỷ lệ phần trăm phông chữ?
Tôi có phải sử dụng Javascript không?

Cảm ơn trước!

Answer 1

Có một plugin jquery cho việc này: http://fittextjs.com/

Answer 2

HTML

<div id="change" style="margin:10%;"> 
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p> 
</div> 

CSS

#change { 
    width: 80%; 
    height: 80%; 
    border: 1px solid black; 
    overflow: hidden; 
    font-size: 1em; 
} 

JAVASCRIPT

$(function() { 
    while($('#change div').height() > $('#change').height()) { 
     $('#change div').css('font-size', (parseInt($('#change div').css('font-size')) - 1) + "px"); 
    } 
}); 

Answer 3

fittext.js không hoạt động chính xác cho tôi (plugin cho jQuery, cũng như có nguồn gốc phiên bản jquery-free), cũng không phải với việc sử dụng các thuộc tính nén, vì vậy tôi tìm thấy một giải pháp:

http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box (ai đó làm việc khác)

mà hoạt động hoàn hảo cho tôi - văn bản dài hơn cũng như văn bản ngắn hơn.

Nó chỉ không phản ứng với thay đổi kích thước của cửa sổ (nó hoạt động chỉ một lần vào tải của trang), vì vậy tôi đã viết mã ngắn này để chạy nó tự động sau mỗi lần thay đổi kích thước cửa sổ (nó làm việc cho tôi):

<script> 
     function calculate_font_sizes() 
     { 
     fitTextInBox('login-h1'); 
     fitTextInBox('subtittle'); 
     } 
     calculate_font_sizes(); 
     window.addEventListener('resize', calculate_font_sizes); 

</script> 

Tôi hy vọng nó có thể giúp ích cho ai đó.

Answer 4

Kiểm tra các thuộc tính vw trong css

http://www.w3schools.com/cssref/css_units.asp

Answer 5

Những gì bạn cần là gọi vw. Ví dụ CSS: font-size: 80vw;. vw có nghĩa là chiều rộng của chế độ xem và 80vw = 80% chiều rộng màn hình thiết bị