cách thay đổi kích thước phông chữ tương ứng với kích thước thay đổi của cửa sổ trong CSS3 hoặc javascript

Question

Tôi thực hiện một số ứng dụng web và tôi gặp sự cố với kích thước phông chữ. Làm cách nào để thay đổi kích thước phông chữ tương ứng với kích thước thay đổi của cửa sổ trong CSS3 hoặc javascript?

Answer 1

Bạn có 3 cách để làm điều đó:

1. Sử dụng http://fittextjs.com/, nhưng các trang có thể bắt đầu chậm hơn
2. Sử dụng phương tiện truyền thông truy vấn
3. Sử dụng ems

Bây giờ, nó phụ thuộc vào những gì bạn muốn là kết quả cuối cùng của bạn. Tôi muốn đến tùy chọn số 3.

Answer 2

Đặt kích thước phông chữ cơ sở của bạn (một trong những bạn xác định cho body yếu tố của bạn trong css) trong px sau đó ở khắp mọi nơi trong phần còn lại của phông chữ trang thiết lập của bạn kích thước tương đối với một sử dụng em đơn vị, sau đó bạn có thể sử dụng các truy vấn phương tiện truyền thông để thay đổi các kích thước phông chữ của tất cả các trang của bạn bằng cách chỉ cần thay đổi phông chữ cơ sở của bạn, một cái gì đó như thế này:

body { 
    font-size: 15px; 
} 
@media (max-width: 1000px) { 
    body { font-size: 1.3em; } 
} 
@media (max-width: 500px) { 
    body { font-size: 1.1; } 
} 

Answer 3

cách lý tưởng để làm điều này là sử dụng các đơn vị vw, được định nghĩa là 1/100th của chiều rộng viewport (do đó tên). Vì vậy, ví dụ, nếu bạn muốn văn bản của bạn là 4,5% chiều rộng của trình duyệt bất cứ lúc nào, bạn có thể sử dụng kích thước:

font-size: 4.5vw; 

... và lý thuyết, nên hoạt động. Thật không may, bạn sẽ tìm thấy, nó không hoạt động như mong đợi: có một lỗi trong trình duyệt WebKit (ít nhất), nơi giá trị cho kích thước phông chữ không được cập nhật trực tiếp (mặc dù nó dành cho tất cả các thứ nguyên khác). Bạn cần phải kích hoạt một repaint để cho kích thước phông chữ để thay đổi, có thể được thực hiện bằng cách cập nhật z-index tài sản từ JavaScript:

window.addEventListener('resize', function(){ 
    document.getElementById('myEl').style.zIndex = '1'; 
}, false); 

Điều này có thể tạo ra một chút choppiness, nhưng nó có nghĩa là bạn không phải tính toán bất kỳ thứ nguyên thực tế nào trong JavaScript và bạn không cần sử dụng các kích thước "bước" như với truy vấn phương tiện.

Answer 4

Cách lý tưởng để làm như vậy là kết hợp giữa kích thước phông chữ của VW và truy vấn @media. Lý do là:

1) em cho chính nó sẽ không rescale bởi kích thước cửa sổ

2) vm cho chính nó sẽ là quá nhỏ so với độ phân giải/màn hình thấp hơn 800px.

Vì vậy, đúng cách để đạt được điều này là:

• Định nghĩa một lớp - prop-văn bản với VM = 1,0 cho chiều rộng màn hình mong muốn của bạn
• Thêm truy vấn phương tiện truyền thông để phù hợp với font-size với mong muốn của bạn lưới phân giải thấp hơn.

Đối với lưới điện đáp ứng của tôi (mà lập một cột 1/2 phải giành lấy 100% chiều rộng dưới 768px chiều rộng) có vẻ như rằng:

<style> 
    .prop-text{font-size:1.0vw} 
    @media (max-width : 768px) { 
    .prop-text{font-size:2.0vw} 
    } 
    /*other media queries here - fit font size to smartphone resolutions */ 
</style> 

<div class="prop-text">your text is here</div>