Viewport Units Converter - Chuyển Đổi vw/vh

Tính năng nổi bật

Tại sao viewport units quan trọng trong responsive design?

Viewport units (vw, vh, vmin, vmax) là công cụ mạnh mẽ cho responsive web design. Không giống như pixels cố định hay percentages phụ thuộc vào parent element, viewport units luôn relative to browser viewport. 1vw = 1% viewport width, 1vh = 1% viewport height. Điều này cho phép tạo elements scale theo screen size mà không cần media queries. Use cases phổ biến: full-screen hero sections (height: 100vh), fluid typography (font-size: 5vw), responsive spacing (padding: 5vw), và aspect-ratio containers. vmin và vmax đặc biệt hữu ích cho designs cần hoạt động tốt trên cả portrait và landscape orientations - vmin lấy dimension nhỏ hơn, vmax lấy dimension lớn hơn.

Lợi ích khi sử dụng

• •Tạo responsive layouts không cần nhiều media queries
• •Full-screen sections dễ dàng với 100vh
• •Fluid typography scale theo viewport
• •Consistent spacing trên mọi screen sizes
• •Hoạt động tốt trên cả portrait và landscape
• •Giảm CSS code với fewer breakpoints
• •Better user experience trên mọi devices
• •Dễ maintain và update responsive styles

Hướng dẫn chi tiết cách chuyển đổi px sang viewport units

1. 1Chọn viewport size từ presets hoặc click 'Current' để dùng viewport hiện tại
2. 2Hoặc nhập viewport width và height tùy chỉnh
3. 3Nhập giá trị pixels bạn muốn chuyển đổi
4. 4Xem kết quả vw, vh, vmin, vmax được tính tự động
5. 5Xem công thức (1vw = Xpx) để hiểu cách tính
6. 6Click icon copy bên cạnh giá trị cần dùng

Hiểu về các Viewport Units trong CSS

CSS có 4 viewport units chính: vw (viewport width) - 1vw = 1% chiều rộng viewport. vh (viewport height) - 1vh = 1% chiều cao viewport. vmin (viewport minimum) - 1vmin = 1% của dimension nhỏ hơn (width hoặc height). vmax (viewport maximum) - 1vmax = 1% của dimension lớn hơn. Ví dụ: trên màn hình 1920×1080, 1vw = 19.2px, 1vh = 10.8px, 1vmin = 10.8px (height nhỏ hơn), 1vmax = 19.2px (width lớn hơn). Trên mobile portrait 375×667, 1vw = 3.75px, 1vh = 6.67px, 1vmin = 3.75px, 1vmax = 6.67px.

Fluid Typography với Viewport Units

Một trong những use cases phổ biến nhất của viewport units là fluid typography - font size tự động scale theo viewport. Thay vì dùng nhiều media queries để adjust font-size, bạn có thể dùng: font-size: calc(16px + 2vw). Công thức này tạo font size tối thiểu 16px và tăng dần theo viewport width. Để giới hạn min/max, dùng clamp(): font-size: clamp(16px, 4vw, 32px) - font size từ 16px đến 32px, scale theo 4vw. Đây là technique được khuyến nghị cho modern responsive typography.

Vấn đề với 100vh trên Mobile và cách khắc phục

Trên mobile browsers, 100vh có thể gây issues vì address bar và navigation bar thay đổi viewport height khi scroll. Điều này khiến elements với height: 100vh bị cắt hoặc có scrollbar không mong muốn. CSS mới có các units giải quyết vấn đề này: svh (small viewport height) - viewport height khi UI elements hiển thị. lvh (large viewport height) - viewport height khi UI elements ẩn. dvh (dynamic viewport height) - thay đổi động theo UI state. Sử dụng: height: 100dvh; với fallback: height: 100vh; height: 100dvh;

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan