Chuyển đổi px sang vw, vh, vmin, vmax
vw: 1% viewport width
vh: 1% viewport height
vmin: 1% của min(vw, vh)
vmax: 1% của max(vw, vh)
Công cụ chuyển đổi CSS viewport units online miễn phí. Chuyển đổi px sang vw, vh, vmin, vmax và ngược lại với độ chính xác cao. Tùy chỉnh viewport width và height theo thiết bị mục tiêu hoặc sử dụng viewport hiện tại của trình duyệt. Hiển thị kết quả cho tất cả viewport units cùng lúc, copy giá trị với một click. Giải thích chi tiết ý nghĩa của từng unit. Công cụ hoàn hảo cho frontend developer muốn tạo layout responsive fluid mà không cần media queries, typography scale theo màn hình, hoặc full-screen sections.
Viewport units (vw, vh, vmin, vmax) là công cụ mạnh mẽ để tạo layout responsive fluid. Không giống px cố định hay % phụ thuộc parent, viewport units scale trực tiếp theo kích thước màn hình. Ứng dụng phổ biến: typography responsive (font-size: 4vw), full-screen hero sections (height: 100vh), spacing tỷ lệ với màn hình, và layout không cần media queries. Công cụ này giúp bạn tính toán chính xác giá trị viewport units từ design pixel-based.
CSS đã giới thiệu các viewport units mới để giải quyết vấn đề 100vh trên mobile browsers. Trên điện thoại, thanh địa chỉ trình duyệt có thể ẩn/hiện khi scroll, làm thay đổi chiều cao viewport thực tế. dvh (Dynamic Viewport Height) thay đổi theo trạng thái thanh địa chỉ - giá trị thay đổi realtime. svh (Small Viewport Height) là chiều cao khi thanh địa chỉ hiển thị đầy đủ - giá trị nhỏ nhất. lvh (Large Viewport Height) là chiều cao khi thanh địa chỉ ẩn - giá trị lớn nhất. Tương tự có dvw, svw, lvw cho width. Và dvi, svi, lvi cho inline dimension, dvb, svb, lvb cho block dimension. Các units mới này được hỗ trợ trên Chrome 108+, Safari 15.4+, Firefox 101+. Nên sử dụng dvh thay cho vh khi cần full-screen sections trên mobile.
Viewport units rất mạnh mẽ nhưng cần sử dụng đúng trường hợp. NÊN dùng cho: Hero sections full-screen (height: 100vh hoặc 100dvh), fluid typography kết hợp clamp() (font-size: clamp(1rem, 2.5vw, 2rem)), spacing tỷ lệ với màn hình (padding: 5vw), và modal/overlay chiếm toàn màn hình. KHÔNG NÊN dùng cho: kích thước cố định nhỏ như border-width, icon size (dùng px hoặc rem), layout trong container (dùng % hoặc flex/grid), và text body thông thường (dùng rem để tôn trọng user font-size settings). Lưu ý quan trọng: tránh dùng vw cho font-size trực tiếp mà không có giới hạn min/max, vì text sẽ quá nhỏ trên mobile hoặc quá lớn trên TV/projector.
Viewport units phát huy sức mạnh tối đa khi kết hợp với CSS functions. clamp(min, preferred, max) giới hạn giá trị trong khoảng an toàn: font-size: clamp(1rem, 2.5vw, 2rem) cho typography fluid với giới hạn. calc() cho phép tính toán phức tạp: width: calc(100vw - 2rem) tạo element full-width trừ padding. min() và max() chọn giá trị nhỏ nhất/lớn nhất: width: min(90vw, 1200px) giới hạn max-width mà không cần property riêng. Kết hợp nhiều functions: padding: clamp(1rem, 5vw, 3rem) tạo padding responsive tự động. Container queries (cq units) là bước tiến mới: thay vì scale theo viewport, element scale theo container - hữu ích cho component-based design. Viewport Units Converter giúp bạn tính toán giá trị chính xác để sử dụng trong các combinations này.
vw (viewport width) = 1% chiều rộng viewport. vh (viewport height) = 1% chiều cao viewport. Ví dụ: trên màn hình 1920px, 1vw = 19.2px. Trên màn hình 1080px cao, 1vh = 10.8px.
vmin = 1% của chiều nhỏ hơn (min của width và height). vmax = 1% của chiều lớn hơn. Ví dụ: viewport 1920x1080, vmin dựa trên 1080 (height), vmax dựa trên 1920 (width). Hữu ích để đảm bảo element không quá lớn/nhỏ khi xoay thiết bị.
Dùng viewport units khi muốn element scale theo màn hình: hero section full-screen (100vh), typography responsive (clamp với vw), spacing tỷ lệ. Dùng px cho kích thước cố định (border, icon nhỏ). Dùng % khi muốn tỷ lệ với parent container.
Trên mobile, 100vh có thể không chính xác do thanh địa chỉ trình duyệt ẩn/hiện. CSS mới có dvh (dynamic viewport height), svh (small), lvh (large) để xử lý. Hiện tại, workaround phổ biến là dùng JavaScript để set --vh custom property.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
