Các đơn vị khung nhìn lớn, nhỏ và động

Các đơn vị CSS mới có tính đến khung nhìn trên thiết bị di động có thanh công cụ động.

Bramus

Khung nhìn và các đơn vị của khung nhìn

Để đặt kích thước cho đối tượng cao bằng khung nhìn, bạn có thể sử dụng đơn vị vw và vh.

• vw = 1% chiều rộng của kích thước khung nhìn.
• vh = 1% chiều cao của kích thước khung nhìn.

Tạo cho một phần tử có chiều rộng là 100vw và chiều cao là 100vh và thành phần này sẽ bao phủ toàn bộ khung nhìn.

Các đơn vị vw và vh đã có trong trình duyệt cùng với các đơn vị bổ sung này

• vi = 1% kích thước trục cùng dòng của khung nhìn.
• vb = 1% kích thước trục khối của khung nhìn.
• vmin = giá trị nhỏ hơn của vw hoặc vh.
• vmax = giá trị lớn hơn của vw hoặc vh.

Những đơn vị này có hỗ trợ trình duyệt tốt.

Nhu cầu đơn vị khung nhìn mới

Mặc dù các đơn vị hiện tại hoạt động tốt trên máy tính, nhưng câu chuyện khác trên thiết bị di động lại khác. Tại đó, kích thước khung nhìn chịu ảnh hưởng của việc có hay không có thanh công cụ động. Đó là những giao diện người dùng như thanh địa chỉ và thanh thẻ.

Mặc dù kích thước khung nhìn có thể thay đổi, nhưng kích thước vw và vh thì không. Do đó, các phần tử có kích thước cao 100vh sẽ tràn ra khỏi khung nhìn.

Khi cuộn xuống, các thanh công cụ động này sẽ rút lại. Ở trạng thái này, các phần tử có kích thước cao 100vh sẽ bao phủ toàn bộ khung nhìn.

Để giải quyết vấn đề này, các trạng thái khác nhau của khung nhìn đã được chỉ định trong Nhóm hoạt động CSS.

• Khung nhìn lớn: Kích thước khung nhìn giả định mọi giao diện UA được mở rộng một cách linh động và rút lại để rút lại.
• Khung nhìn nhỏ: Kích thước khung nhìn: giả sử mọi giao diện UA được mở rộng và rút lại một cách linh động để được mở rộng.

Khung nhìn mới cũng có các đơn vị được chỉ định cho chúng:

• Các đơn vị biểu thị khung nhìn lớn có tiền tố lv. Đơn vị là lvw, lvh, lvi, lvb, lvmin và lvmax.
• Các đơn vị biểu thị khung nhìn nhỏ có tiền tố sv. Đơn vị là svw, svh, svi, svb, svmin và svmax.

Kích thước của các đơn vị phần trăm khung nhìn này là cố định (và do đó ổn định) trừ phi chính khung nhìn đó được đổi kích thước.

Ngoài các khung nhìn lớn và nhỏ, còn có một khung nhìn linh động cho thấy sự cân nhắc linh hoạt về giao diện người dùng UA:

• Khi thanh công cụ động được mở rộng, khung nhìn động sẽ bằng kích thước của khung nhìn nhỏ.
• Khi thanh công cụ động được rút lại, khung nhìn động sẽ bằng kích thước của khung nhìn lớn.

Các đơn vị đi kèm có tiền tố dv: dvw, dvh, dvi, dvb, dvmin và dvmax. Kích thước của chúng bị giới hạn giữa phiên bản lv* và sv*.

Các đơn vị này xuất hiện trong Chrome 108, tham gia Safari và Firefox đã được hỗ trợ.

Chú ý

Có một số lưu ý cần biết về Đơn vị khung nhìn:

• Không có đơn vị khung nhìn nào tính đến kích thước của thanh cuộn. Trên các hệ thống đã bật thanh cuộn cổ điển, do đó, một phần tử có kích thước là 100vw sẽ quá rộng. Đây là theo quy cách.

• Giá trị cho khung nhìn động không cập nhật ở tốc độ 60 khung hình/giây. Việc cập nhật trong tất cả trình duyệt sẽ bị điều tiết khi giao diện người dùng UA mở rộng hoặc rút lại. Một số trình duyệt thậm chí gỡ lỗi cập nhật hoàn toàn tuỳ thuộc vào cử chỉ (cuộn chậm so với vuốt) được sử dụng.

• Bàn phím ảo (còn gọi là bàn phím ảo) không được xem là một phần của giao diện người dùng UA. Do đó, điều này không ảnh hưởng đến kích thước của các đơn vị khung nhìn. Trong Chrome, bạn có thể chọn tham gia hành vi mà sự hiện diện của bàn phím ảo ảnh hưởng đến các đơn vị khung nhìn.

Tài nguyên khác

Để tìm hiểu thêm về khung nhìn và các đơn vị này, hãy xem tập này của HTTP 203. Trong đó, Bramus cho Jake biết mọi thông tin về các khung nhìn khác nhau và giải thích chính xác cách xác định kích thước của các đơn vị này.

Tài liệu đọc thêm:

• Thông số kỹ thuật của giá trị CSS 4: Độ dài tương đối của khung nhìn
• Mục nhập trạng thái Chrome
• Nội dung giải thích về Layout Viewport
• Nội dung giải thích về Đơn vị khung nhìn