Vmin là một trong những đơn vị css liên quan đến kích thước của khung nhìn trình duyệt (viewport). Cho bạn nào quan tâm, thì các đơn vị đó bao gồm: vw, vh, vmin, vmax.
Định nghĩa đơn vị vmin
Trong css, đơn vị vmin (viết tắt của viewport minimum) được định nghĩa là tỷ lệ phần trăm theo giá trị nhỏ hơn giữa chiều rộng và chiều cao của khung nhìn trình duyệt. Cụ thể:
1 vmin = min(viewport_width, viewport_height) / 100
Như vậy, nếu trình duyệt có khung nhìn theo chiều rộng là 1000px, và khung nhìn theo chiều cao là 700px. Thì:
- min(viewport_width, viewport_height) = 700px
- 1vmin = 700px / 100 = 7px
Ví dụ sử dụng đơn vị vmin trong css
Đơn vị vmin rất hữu ích khi bạn cần tạo ra các phần tử có kích thước linh hoạt, phù hợp với cả chiều rộng và chiều cao của cửa sổ trình duyệt. Điều này giúp đảm bảo giao diện web luôn hiển thị đẹp mắt trên mọi kích thước màn hình.
Ví dụ 1: hiển thị hình ảnh vuông lớn nhất nằm trong khung nhìn của trình duyệt.
Bài toán đặt ra là chúng ta cần dùng css để định dạng một tấm hình với kích thước lớn nhất có thể mà vẫn nằm trọn vẹn trong khung nhìn, tức là không cần cuộn chuột theo chiều ngang hay dọc để xem hết toàn bộ tấm hình.
Hướng giải quyết:
Chúng ta sẽ dùng css, đặt chiều rộng của tấm hình bằng với kích thước nhỏ hơn của chiều rộng và chiều cao của khung nhìn.
Code HTML
<body>
<img id="fullscreen" src="img/fullscreen-image.png" alt="demo fullscreen image">
</body>
Code CSS
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
background-color: coral;
}
#fullscreen{
width: 100vmin;
height: 100vmin;
border: 2px solid red;
}
Ảnh chụp kết quả demo:
Đơn vị vmin được hỗ trợ trong những phiên bản trình duyệt nào ?
Tính đến thời điểm hiện tại (tháng 5, năm 2023), đơn vị vmin trong css được hỗ trợ trong hầu hết các trình duyệt web hiện đại. Dưới dây là danh sách các trình duyệt phổ biến hỗ trợ đơn vị vmin:
- Google Chrome (version 20 và mới hơn)
- Mozilla Firefox (version 19 và mới hơn)
- Apple Safari (version 6 và mới hơn)
- Microsoft Edge (tất cả phiên bản)
- Opera (version 15 và mới hơn)
Sử dụng đơn vị vmin trong CSS là một cách hiệu quả để tạo ra các giao diện linh hoạt với nhiều kích thước màn hình khác nhau. Hy vọng qua bài viết này, bạn đã hiểu rõ hơn về vmin và cách áp dụng nó vào thiết kế web của mình. Hãy thử áp dụng và khám phá sự tiện lợi mà đơn vị vmin mang lại!
Bình luận
Bài viết có vấn đề ? Hãy cho chúng tôi biết.
Gửi báo cáo sai phạmHãy để nguồn Suta.media khi phát hành lại nội dung này !
Hãy là nguời đầu tiên bình luận về Đơn vị vmin trong css - định nghĩa - cách sử dụng kèm code mẫu