Hãy yếu tố mất tất cả không gian có sẵn

Question

JSFiddle: https://http://jsfiddle.net/thou6ju9/1//

trạng:
gạch với chữ được tạo động và bổ sung vào khu vực màu xanh lá cây. Sử dụng CSS, chúng được sắp xếp trong div bằng flex. Khi màn hình được thay đổi kích thước, các chữ cái được sắp xếp lại để vừa với độ phân giải mới.

Mục tiêu:
Nếu màn hình khá lớn, các chữ cái sẽ chiếm nhiều không gian hơn bằng cách chia tỷ lệ nhưng vẫn giữ nguyên tỷ lệ khung hình của chúng.

UPDATE:
Nếu các chữ cái có thể phù hợp trên 1 hàng, họ nên tập trung và quy mô cho đến khi -most của khu vực màu xanh lá cây được lấy ở (không chồng chéo nhau, do đó tôn trọng lề) Khi 2 hàng là cần thiết , các chữ cái phải được phân bố và chia đều như nhau (theo khoảng trống có sẵn giữa hai hàng)

Vấn đề:
Tôi giả định rằng điều này không thể thực hiện với CSS một mình. Một mixmatch với JS sẽ là con đường đi. Câu hỏi đặt ra là: theo cách nào chính xác?

tôi đã bao gồm một chức năng phụ (adjustLetters), nơi một số điều chỉnh JS có thể được thực hiện nếu nó nên cần thiết

for (var index = 0; index < AMOUNT_OF_LETTERS; index++) { 
    sContainer.append(addLetter(arrLength[index])); 
} 
adjustLetters(); 

Hạn chế:
- Từ 1 đến 10 ký tự sẽ được hiển thị - Letters thể không đi ra ngoài vùng màu xanh lá cây - Nó sẽ hoạt động khi tất cả các chữ cái là 1, 2 hoặc 3 ký tự hoặc kết hợp cả hai - Điều này sẽ luôn được hiển thị theo hướng ngang (không thực sự là hạn chế)

var arrLength = [1, 3, 2, 1, 2, 3, 1, 2, 3, 3, 2, 2, 1, 2, 3]; 

Chiều dài của các chữ cái được quy định tại mảng này

Một giải pháp hoàn chỉnh sẽ là tuyệt vời, nhưng là một hướng đi đúng hướng được chắc chắn cũng đánh giá cao :-)

Answer 1

tôi không có đủ thời gian đúng bây giờ để làm cho một spinet mã như là một ví dụ, nhưng tôi ít nhất có một giải pháp có thể. Bạn có thể có một số JavaScript sẽ nhận được chiều rộng/chiều cao màn hình và kích thước phông chữ bằng cách xác định thẻ kiểu với phương trình toán học sẽ xác định kích thước phông chữ. hãy nhớ, kích thước phông chữ tính bằng pixel.