Nhưng nếu container không phải là khung nhìn (cơ thể) thì sao?
Câu hỏi này được hỏi trong một bình luận của Alex dưới câu trả lời được chấp nhận .
Thực tế đó không có nghĩa là vwkhông thể được sử dụng ở một mức độ nào đó cho kích thước của container đó. Bây giờ để xem bất kỳ biến thể nào, tất cả đều phải giả định rằng container theo một cách nào đó có kích thước linh hoạt. Cho dù thông qua một tỷ lệ phần trăm trực tiếp widthhoặc thông qua việc trừ 100% lợi nhuận. Điểm sẽ trở thành "moot" nếu thùng chứa luôn được đặt thành, giả sử, 200pxrộng - sau đó chỉ cần đặt một giá trị font-sizehoạt động cho chiều rộng đó.
ví dụ 1
Tuy nhiên, với một container có chiều rộng linh hoạt, phải nhận ra rằng theo một cách nào đó, container vẫn có kích thước ngoài khung nhìn . Do đó, vấn đề là điều chỉnh vwcài đặt dựa trên sự khác biệt kích thước phần trăm đó cho chế độ xem, có nghĩa là có tính đến kích thước của trình bao bọc cha mẹ. Lấy ví dụ này :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
Giả sử ở đây divlà một đứa con của body, nó 50%có 100%chiều rộng đó, là kích thước khung nhìn trong trường hợp cơ bản này. Về cơ bản, bạn muốn thiết lập một vwcái nhìn sẽ tốt cho bạn. Như bạn có thể thấy trong nhận xét của tôi trong nội dung CSS ở trên, bạn có thể "nghĩ" thông qua đó về mặt toán học đối với kích thước khung nhìn đầy đủ, nhưng bạn không cần phải làm điều đó. Văn bản sẽ "uốn cong" với vùng chứa vì vùng chứa bị uốn cong với thay đổi kích thước khung nhìn. CẬP NHẬT: đây là một ví dụ về hai container có kích thước khác nhau .
Ví dụ 2
Bạn có thể giúp đảm bảo kích thước khung nhìn bằng cách buộc tính toán dựa trên đó. Xem xét ví dụ này :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
Kích thước vẫn dựa trên chế độ xem, nhưng về bản chất được thiết lập dựa trên kích thước thùng chứa.
Nên thay đổi kích thước của container một cách linh hoạt ...
Nếu kích thước của phần tử container kết thúc thay đổi linh hoạt mối quan hệ tỷ lệ phần trăm của nó thông qua các @mediađiểm dừng hoặc thông qua JavaScript, thì bất kỳ "mục tiêu" cơ sở nào cũng sẽ cần tính toán lại để duy trì "mối quan hệ" tương tự cho kích thước văn bản.
Lấy ví dụ # 1 ở trên. Nếu divđược chuyển sang 25%chiều rộng bằng một trong hai @mediahoặc JavaScript, thì đồng thời, font-sizecần phải điều chỉnh trong truy vấn phương tiện hoặc bằng JavaScript để tính toán mới 5vw * .25 = 1.25. Điều này sẽ đặt kích thước văn bản ở cùng kích thước mà nó sẽ có "chiều rộng" của 50%thùng chứa ban đầu đã giảm một nửa so với kích thước khung nhìn, nhưng hiện đã bị giảm do thay đổi cách tính tỷ lệ phần trăm của chính nó.
Một thử thách
Với chức năng CSS3calc() đang được sử dụng, sẽ rất khó điều chỉnh linh hoạt, vì chức năng đó không hoạt động cho các font-sizemục đích tại thời điểm này. Vì vậy, bạn không thể thực hiện điều chỉnh CSS 3 thuần túy nếu chiều rộng của bạn thay đổi calc(). Tất nhiên, một sự điều chỉnh nhỏ về chiều rộng cho lề có thể không đủ để đảm bảo bất kỳ thay đổi nào font-size, vì vậy nó có thể không quan trọng.
font-size: 100%;có nghĩa là 100% kích thước văn bản sẽ có (nghĩa là văn bản mà nó thừa hưởng từ cha mẹ của nó). Theo mặc định đó là 16px. Vì vậy, nếu bạn đã sử dụng 50%, nó sẽ có kích thước phông chữ: 8px