Hướng dẫn về các đơn vị CSS Viewport vw, vh, vmin, vmax

Độ dài phần trăm lượt xem, hoặc là đơn vị khung nhìn vì chúng thường được nhắc đến nhiều hơn, là các đơn vị CSS đáp ứng cho phép bạn xác định kích thước là phần trăm của chiều rộng hoặc chiều dài của khung nhìn. Các đơn vị khung nhìn có thể khá hữu ích trong trường hợp các đơn vị CSS phản ứng khác, chẳng hạn như tỷ lệ phần trăm, khó làm việc.

Mặc dầu Tài liệu của W3C trên các đơn vị khung nhìn chứa mọi thứ có thể được đưa vào lý thuyết, nó không dài dòng lắm. Vì vậy, trong bài viết này, chúng ta sẽ xem xét cách các đơn vị CSS này làm việc trong thực tế.

Chiều cao khung nhìn (vh) & chiều rộng khung nhìn (vw)

W3C định nghĩa khung nhìn như “kích thước của khối chứa ban đầu”. Nói cách khác, khung nhìn là khu vực chứa trong cửa sổ trình duyệt hoặc bất kỳ khu vực xem khác trên màn hình.

Các vw và vh các đơn vị đại diện cho tỷ lệ phần trăm chiều rộng và chiều cao của chế độ xem thực tế. Họ có thể lấy một giá trị từ 0 đến 100 theo các quy tắc sau:

 100vw = 100% chiều rộng khung nhìn 1vw = 1% chiều rộng khung nhìn 100vh = 100% chiều cao khung nhìn 1vh = 1% chiều cao của khung nhìn 

Sự khác biệt về đơn vị tỷ lệ phần trăm

Vậy, các đơn vị khung nhìn khác với các đơn vị tỷ lệ như thế nào? Đơn vị tỷ lệ kế thừa kích thước của phần tử cha trong khi các đơn vị khung nhìn không. Đơn vị khung nhìn luôn được tính là tỷ lệ phần trăm của kích thước khung nhìn. Kết quả là, một phần tử được xác định bởi các đơn vị khung nhìn có thể vượt quá kích thước của phần tử mẹ của nó.

Ví dụ: Phần toàn màn hình

Phần toàn màn hình có lẽ là trường hợp sử dụng được biết đến rộng rãi nhất của các đơn vị khung nhìn.

Các HTML khá đơn giản; chúng ta chỉ có ba phần dưới nhau và chúng tôi muốn mỗi người trong số họ che toàn bộ màn hình (nhưng không nhiều hơn).

Trong CSS, chúng tôi sử dụng 100vh như một Chiều cao giá trị và 100% như chiều rộng. Chúng tôi không sử dụng vw đơn vị ở đây theo mặc định, thanh cuộn cũng được thêm vào đến kích thước khung nhìn. Vì vậy, nếu chúng ta sử dụng chiều rộng: 100vw; quy tắc một thanh cuộn ngang sẽ xuất hiện tại dưới cùng của cửa sổ trình duyệt.

 * lề: 0; đệm: 0;  phần kích thước nền: bìa; vị trí nền: trung tâm; chiều rộng: 100%; chiều cao: 100vh;  .section-1 hình nền: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 hình nền: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 hình nền: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Trên bản demo gif dưới đây, bạn có thể thấy rằng vh Là thực sự là một đơn vị đáp ứng.

Theo các tài liệu của W3C, đã nói ở trên vấn đề thanh cuộn ngang có thể được giải quyết bằng cách thêm tràn: tự động; quy tắc cho phần tử gốc. Giải pháp này chỉ hoạt động một phần, Tuy nhiên. Thanh cuộn ngang, thực sự, biến mất nhưng chiều rộng Là vẫn được tính dựa trên chiều rộng khung nhìn (bao gồm thanh bên), vì vậy các yếu tố sẽ lớn hơn một chút so với mức cần thiết.

Tôi sẽ nói, tôi sẽ không dám sử dụng vw đơn vị trên kích thước các yếu tố toàn màn hình vì lý do này Chúng tôi thậm chí không cần nó, như là chiều rộng: 100%; quy tắc hoạt động hoàn hảo. Với bố cục toàn màn hình, thử thách thực sự luôn là làm thế nào để đặt giá trị chiều cao phù hợp và vh đơn vị đưa ra một giải pháp tuyệt vời cho điều đó.

Các trường hợp sử dụng khác

Nếu bạn quan tâm đến trường hợp sử dụng khác vw và vh Lullabot có một bài viết tuyệt vời liệt kê một một số ví dụ thực tế (với bản trình diễn Codepen), chẳng hạn như:

• Thẻ tỷ lệ cố định.
• Giữ một yếu tố ngắn hơn màn hình.
• Thu nhỏ văn bản.
• Thoát ra khỏi container.

Opera.dev cũng có một hướng dẫn ngắn về cách bạn có thể tận dụng đòn bẩy của vw đơn vị trong tạo kiểu chữ đáp ứng.

Bạn không thể chỉ sử dụng các đơn vị khung nhìn trên chiều rộng và Chiều cao tài sản nhưng trên bất kỳ một trong những khác. Chẳng hạn, bạn có thể đặt kích thước của miếng đệm và lề sử dụng vw và vh đơn vị cũng vậy.

Chế độ xem tối thiểu (vmin) & khung nhìn tối đa (vmax)

Các vmin và vmax đơn vị cho phép bạn truy cập kích thước của bên nhỏ hơn hoặc lớn hơn của chế độ xem, theo các quy tắc sau:

 100vmin = 100vw hoặc 100vh, tùy theo giá trị nào nhỏ hơn 1vmin = 1vw hoặc 1vh, tùy theo giá trị nào nhỏ hơn 100vmax = 100vw hoặc 100vh, tùy theo giá trị nào lớn hơn 1vmax = 1vw hoặc 1vh 

Vì vậy, trong trường hợp của một hướng dọc, 100vmin bằng 100vw, như khung nhìn là nhỏ hơn theo chiều ngang so với chiều dọc. Cho cùng một lý do, 100vmax sẽ bằng 100vh.

Tương tự, trong trường hợp định hướng phong cảnh, 100vmin bằng 100vh, như khung nhìn là nhỏ hơn theo chiều dọc so với chiều ngang. Và dĩ nhiên, 100vmax sẽ bằng 100vw đây.

Ví dụ: Làm cho văn bản anh hùng có thể đọc được trên mọi màn hình

Các vmin và vmax các đơn vị ít được biết đến rộng rãi hơn vw và vh. Tuy nhiên, chúng có thể được sử dụng xuất sắc như một thay thế cho định hướng @phương tiện truyền thông truy vấn. Ví dụ, vmin và vmax có thể có ích khi bạn có các yếu tố có vẻ lạ ở các tỷ lệ khác nhau.

Mã mới có một hướng dẫn tuyệt vời trong đó họ thảo luận về cách bạn có thể giữ văn bản anh hùng có thể đọc được trên mọi màn hình, sử dụng vmin đơn vị. Văn bản anh hùng có xu hướng nhìn quá nhỏ trên di động và quá lớn trên màn hình lớn.

Đây là ý tưởng chính của giải pháp của họ:

 h1 cỡ chữ: 20vmin; họ phông chữ: Avenir, sans-serif; trọng lượng phông chữ: 900; văn bản-align: trung tâm;  

Trong bản demo Codepen, bạn có thể xem cách vmin giải quyết vấn đề dễ đọc của văn bản anh hùng. Truy cập “Toàn trang” xem trên Codepen, sau đó thay đổi kích thước cửa sổ trình duyệt của bạn cả theo chiều ngang và chiều dọc để xem văn bản anh hùng thay đổi như thế nào.

Xem Bút vMin cho Văn bản anh hùng của Dudley Storey (@dudleystorey) trên CodePen.

Hỗ trợ trình duyệt

Như bạn có thể thấy trên biểu đồ CanIUse bên dưới, hỗ trợ trình duyệt tương đối tốt cho các đơn vị khung nhìn. Tuy nhiên, hãy nhớ rằng một số phiên bản IE và Edge không hỗ trợ vmax. Ngoài ra, iOS 6 và 7 có vấn đề với vh đơn vị, đã được sửa trong iOS 8.