Px to VH Converter | Fast Pixel to Viewport Height
This free online converter allows you to instantly translate standard pixels (px) into viewport height units (vh). Simply enter the baseline viewport height of your target device and the pixel value you wish to convert.
What is a Viewport Height (vh) Unit?
In modern responsive web design, vh stands for viewport height. One vh unit is equal to exactly 1% of the total height of the browser’s viewport. By converting static pixel layouts into relative viewport dimensions, web developers can ensure that elements scale seamlessly across different screen sizes—from mobile devices to ultra-wide desktop monitors.
How Do You Convert Pixels (px) to VH?
You can use the calculator above for an instant result, or you can perform the conversion manually using the standard CSS formula:
Viewport Height Unit (vh) = 100 × (Pixel Unit Size / Viewport Height)
Example Calculation: If you want an element to be 120 pixels tall on a screen that has a total viewport height of 720 pixels, the math looks like this: vh = 100 × (120 / 720) = 16.666667vh
This exact calculation makes it incredibly easy to set up custom, arbitrary values when working with utility-first CSS frameworks like Tailwind CSS (e.g., writing a class like h-[16.6vh]).
Why Optimize with Viewport Units?
Transitioning from hardcoded pixels to viewport units is a crucial step in modern frontend development. Dynamically scaling elements based on the device’s screen size prevents unexpected layout shifts. By maintaining proper structural scaling before the Interaction to Next Paint (INP) occurs, you inherently protect your site’s Cumulative Layout Shift (CLS) scores and keep your Core Web Vitals healthy.
Need to Reverse the Calculation?
If you are working backwards from an existing stylesheet and need to translate viewport measurements back into absolute device pixels, you can use our dedicated VH to Pixel Converter.
Px to VH Conversion Table (1080p Standard Height)
While some developers test scaling against large 1920px portrait monitors, 1080px remains the industry standard height for desktop browsing. Below is a quick reference table calculating common pixel values against a 1080px viewport height.
| Pixel | VH |
|---|---|
| 10 px | 0.9259 vh |
| 20 px | 1.8518 vh |
| 30 px | 2.7777 vh |
| 40 px | 3.7037 vh |
| 50 px | 4.6296 vh |
| 60 px | 5.5555 vh |
| 70 px | 6.4814 vh |
| 80 px | 7.4074 vh |
| 90 px | 8.3333 vh |
| 100 px | 9.2592 vh |
| 150 px | 13.8888 vh |
| 200 px | 18.5185 vh |
| 250 px | 23.1481 vh |
Pixels (px) to vh conversion table if viewport height is 1920
These are the results of the px to vh conversion commonly used by developers and designers if the viewport height is 1920.
| Pixel | VH |
|---|---|
| 10 px | 0.52083333333333 vh |
| 20 px | 1.0416666666667 vh |
| 30 px | 1.5625 vh |
| 40 px | 2.0833333333333 vh |
| 50 px | 2.6041666666667 vh |
| 60 px | 3.125 vh |
| 70 px | 3.6458333333333 vh |
| 80 px | 4.1666666666667 vh |
| 90 px | 4.6875 vh |
| 100 px | 5.2083333333333 vh |
| 110 px | 5.7291666666667 vh |
| 120 px | 6.25 vh |
| 130 px | 6.7708333333333 vh |
| 140 px | 7.2916666666667 vh |
| 150 px | 7.8125 vh |
| 160 px | 8.3333333333333 vh |
| 170 px | 8.8541666666667 vh |
| 180 px | 9.375 vh |
| 190 px | 9.8958333333333 vh |
| 200 px | 10.416666666667 vh |
| 210 px | 10.9375 vh |
| 220 px | 11.458333333333 vh |
| 230 px | 11.979166666667 vh |
| 240 px | 12.5 vh |
| 250 px | 13.020833333333 vh |
Frequently Asked Questions (FAQ)
What is the difference between vh and % in CSS?
While both are relative units, they behave differently. A percentage (%) is relative to the height of the parent container, meaning if the parent element is 500px tall, 50% will be 250px. Viewport height (vh), on the other hand, is always relative to the browser window’s total visible height, regardless of the parent container’s size.
How do I use px to vh conversions in Tailwind CSS?
Tailwind CSS provides built-in fractional utility classes (like h-1/2 for 50%), but for specific viewport-based heights, you can use arbitrary values. Once you calculate your vh using our converter, you can inject it directly into your HTML using bracket notation, such as h-[16.5vh] or min-h-[75vh].
Does using viewport units improve Core Web Vitals?
Yes, using relative units like vh and vw instead of fixed pixels can significantly improve your Cumulative Layout Shift (CLS) score. By defining structural elements (like hero sections or image containers) with viewport units, the browser can reserve the correct amount of screen space across all devices before the page fully loads, preventing content from jumping around.
What is the difference between vh, svh, and dvh?
On mobile devices, the standard vh unit doesn’t always account for expanding and collapsing browser UI elements (like the address bar). To solve this, modern CSS introduced svh (Small Viewport Height, which assumes the UI is expanded) and dvh (Dynamic Viewport Height, which adapts as the UI expands or retracts). The mathematical conversion from pixels is the exact same for all three!