CSS, kích thước phông chữ tương đối

Question

Có thể đặt kích thước phông chữ thành phần trăm kích thước vùng chứa không? Tôi có một danh sách các mục có hình ảnh, tiêu đề và mô tả. Hình ảnh sẽ tự động thay đổi kích thước khi người dùng thay đổi kích thước cửa sổ. Tôi muốn font tiêu đề để làm như vậy.

chỉnh sửa: Javascript/JQuery là tốt.

Answer 1

Chỉ cần mở rộng về câu trả lời của Tyler, đây là những gì javascript là có nghĩa là cho, mặc dù tôi chút chắc chắn rằng bạn có thể đạt được thành tích này cùng sử dụng khung nhìn CSS3, bạn sẽ tốt hơn bằng cách sử dụng jQuery (đó là thường trong bộ nhớ cache của trình duyệt nhất và luôn lưu trữ trên Google vì vậy không cần phải lo lắng :)

Nếu bạn có một css như thế này:

#body #mytext { 
    font-size: 50%; 
} 

bạn có thể tự động thay đổi kích thước trong jQuery như thế này:

$(window).resize(function(){ 
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px'); 
}); 

Answer 2

Không, điều này chỉ có thể được thực hiện bằng JavaScript.

Answer 3

Tôi đã thực hiện điều đó với jquery trong quá khứ. Hãy xem bài viết này nếu bạn quan tâm đến nó. Bạn cũng có thể sử dụng CSS để phát hiện chiều rộng thiết bị (không phải trình duyệt và nó không được hỗ trợ trong các trình duyệt cũ).

http://css-tricks.com/resolution-specific-stylesheets/

Answer 4

jquery là một tùy chọn?

siêu dễ dàng nếu nó là: fiddle

<div id="container"> 
    <p>HELLO WORLD!</p> 
</div>​ 


<script> 
$(document).ready(function() { 
    var sizeMe = ($('#container').height()/100) * 90; /* 90% of container */ 
    $('p').css('font-size', sizeMe); 
}; 
</script> 

Answer 5

Trong CSS3, có đơn vị vw, viết tắt của 1/100 chiều rộng khung nhìn. Ví dụ:

h1 { font-size: 5.5vw; } 

đặt kích thước phông chữ tiêu đề thành 5,5% chiều rộng khung nhìn.

Tuy nhiên, điều này dường như chỉ hoạt động trên IE 9 (Chế độ tiêu chuẩn). Hơn nữa, IE 9 không tự động thay đổi giá trị của đơn vị khi cửa sổ trình duyệt được thay đổi kích thước, chỉ khi tải lại.