VH to PX Converter
Convert between viewport height units (vh) and pixels (px)
What is Viewport Height (VH) and How Does it Relate to Pixels?
In modern, responsive web design, Viewport Height (VH) is a CSS relative unit representing a percentage of the browser window's height. 1vh is exactly equal to 1% of the total viewport height. Translating VH units into Pixels (PX) helps developers troubleshoot spacing, predict sizing for full-screen hero sections, and design layouts that perfectly fit mobile, tablet, and desktop screens without breaking.
The Mathematical Formula
To convert viewports to absolute pixels, you multiply the target VH value by the height of the screen/browser viewport and divide by 100:
PX = VH × (Viewport Height ÷ 100)
For example, if a user has a browser screen height of 1080px and you have a container designed with 50vh:
Common VH to PX Conversion Chart
The table below maps common Viewport Height (VH) values to their corresponding pixel dimensions across standard screen heights:
| VH Value | at Laptop Height (768px) | at Standard HD Height (1080px) | at 4K Screen Height (2160px) |
|---|---|---|---|
| 1 vh | 7.68 px | 10.8 px | 21.6 px |
| 5 vh | 38.4 px | 54 px | 108 px |
| 10 vh | 76.8 px | 108 px | 216 px |
| 25 vh | 192 px | 270 px | 540 px |
| 50 vh | 384 px | 540 px | 1080 px |
| 75 vh | 576 px | 810 px | 1620 px |
| 100 vh | 768 px | 1080 px | 2160 px |
Mobile Layout Warning: The 100vh Bug
Using 100vh on mobile devices can frequently cause layout clipping. This occurs because mobile browser UI elements (such as the dynamic search/navigation address bar) slide in and out of view, changing the active screen height. In modern layouts, it is often recommended to combine vh units with CSS custom variables, dvh (dynamic viewport height), or svh (small viewport height) to achieve stable layouts on modern iOS and Android browsers.
