Đơn vị đo trong CSS bao gồm các đơn vị tuyệt đối như inch, centimet, point, v.v ... cũng như các đơn vị đo tương đối như phần trăm và đơn vị em. Bạn cần những giá trị này để chỉ định các đơn vị đo khác nhau trong CSS, ví dụ border = "1px solid red" .
vd: một thành phần được thiết lập font là 12pt, vậy 2em bằng với 24pt, ’em‘ là đơn vị rất hữu dụng trong css, nhất là trong trường hợp người dùng sử dụng zoom để phóng to chữ trong trình duyệt, đơn vị em sẽ giãn ra theo tỉ lệ chữ.
Nếu có nhiều tag lồng nhau, thì phần tử con khi sử dụng em sẽ chịu ảnh hưởng của phần tử cha kết tiếp.
Độ 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ìnSự 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ìnhPhầ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
0 giá trị và
1 như
2. 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 4 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//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
6 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
2 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à
9 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ácNế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
2 và
0 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 [ * 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];
8] & khung nhìn tối đa [ * 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];
9]
Các
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];8 và
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];9 đơ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 = 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 1vh2 bằng
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 1vh3, 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,
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 1vh4 sẽ bằng
100vh.Tương tự, trong trường hợp định hướng phong cảnh,
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 1vh2 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, 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 1vh4 sẽ bằng
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 1vh3 đâ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
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];8 và
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];9 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 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;4 truy vấn. Ví dụ,
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];8 và
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];9 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
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];8 đơ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
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];8 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ợ
* 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 ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg']; .section-2 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg']; .section-3 hình nền: url ['//assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'];9. Ngoài ra, iOS 6 và 7 có vấn đề với
vh đơn vị, đã được sửa trong iOS 8.