PX to VH
A converter that calculates the vh from a px for a given breakpoint to make the measurement responsive
Hot Keys
- C - Calculate and copy the result of calculation.
- V - Calculate the result.
- B - Copy the result of calculation.
- R - Reverse the converter to "VH to PX".
- Q - Focus the "Pixels" input.
- W - Focus the "Viewport Height" input.
About PX to VH Conversion
What is PX (Pixels)?
PX (Pixels) is an absolute CSS unit representing a fixed size on screen. Pixel values do not adapt to the viewport size or user preferences, making them predictable for precise measurements but inflexible for responsive layouts.
What is VH (Viewport Height)?
VH (Viewport Height) is a relative CSS unit equal to 1% of the browser viewport's height. Setting an element to 100vh makes it exactly as tall as the visible browser window, regardless of screen size. VH adapts automatically when the viewport is resized, making it essential for responsive, full-screen layouts.
The Conversion Formula
VH = (PX ÷ Viewport Height) × 100
PX = (VH × Viewport Height) ÷ 100
Example: at a 1000px viewport, 200px = (200 ÷ 1000) × 100 = 20vh
How to Convert PX to VH Online
- 1
Enter your pixel value
Type the pixel measurement you want to convert into the top input field. This is typically a height value from your design or browser dev tools.
- 2
Set your viewport height
Enter the total height of your target viewport (e.g. 768px for a tablet, 900px for a laptop, 1080px for a common desktop). The default is 1000px.
- 3
Click Calculate
Click the Calculate button (or press V) to see the VH result. Press C to calculate and copy in one step.
- 4
Copy the VH value
Click Copy to grab the VH value and paste it into your CSS. Use the reverse button (⇅) to convert VH back to PX when needed.
Common Use Cases for PX to VH Conversion
Full-Screen Hero Sections
Set a hero section to exactly the visible screen height with height: 100vh. Convert pixel heights from design mockups to VH to ensure the section fills the viewport on any screen.
Sticky Sidebars and Navigation
Create fixed-height sidebars or navigation drawers that span the full viewport height. Convert the pixel height you measured in dev tools to VH for a truly responsive sticky element.
Scroll-Snapping Layouts
Each scroll-snap section needs to be exactly 100vh tall. Convert pixel section heights from your design to VH to implement smooth full-page scroll snapping with CSS scroll-snap-type.
Modal and Overlay Heights
Set modal max-heights as a VH percentage (e.g. 80vh) so they never overflow the screen. Convert a fixed pixel max-height from your design to the equivalent VH value for a specific target viewport.
Responsive Typography with clamp()
CSS clamp() can use VH in its fluid middle value. Convert pixel font size targets at specific viewport heights to VH for font scaling that responds to the viewport height rather than width.
Mobile Safari Viewport Fixes
Mobile browsers subtract the address bar from the viewport. Convert your intended pixel heights to VH and compare with dvh (dynamic viewport height) to choose the right unit for mobile-safe full-screen layouts.
Frequently Asked Questions
How do I convert PX to VH?
Use the formula: VH = (PX ÷ Viewport Height) × 100. For example, with a 900px viewport height, 270px = (270 ÷ 900) × 100 = 30vh. Enter your values in the converter above and click Calculate for instant results.
What viewport height should I use for the conversion?
Use the actual viewport height of your target device or breakpoint. Common values: 568px (iPhone SE), 667px (iPhone 8), 768px (iPad portrait), 900px (laptop), 1080px (1080p desktop). If you're targeting multiple devices, convert for each one and use a VH value that works across them.
What is 100vh in pixels?
100vh equals the full height of the browser viewport in pixels — which varies by device and window size. On a 900px viewport 100vh = 900px; on a 1080px viewport 100vh = 1080px. It always matches the current visible height of the browser window, making it dynamic rather than fixed.
Why doesn't 100vh fill the screen on mobile?
On mobile browsers (especially Safari), 100vh includes the address bar height, so the element extends behind it. Use 100dvh (dynamic viewport height) for mobile-safe full-screen elements — it recalculates when the address bar shows or hides.
What is the difference between VH, DVH, SVH, and LVH?
vh — classic viewport height, includes browser chrome on mobile. dvh — dynamic viewport height, updates as address bar shows/hides. svh — small viewport height, uses the smallest possible viewport (address bar visible). lvh — large viewport height, uses the largest possible viewport (address bar hidden). Use dvh for most mobile full-screen use cases.
When should I use VH instead of a percentage?
Use VH when you want an element's height relative to the browser window, not its parent container. A percentage height requires the parent to have a defined height — VH does not. For example, height: 50vh always means half the viewport, while height: 50% means half the parent element.
Can I use VH for properties other than height?
Yes. VH works for any CSS length property including min-height, max-height, margin, padding, font-size, and gap. Using VH for font size creates text that scales with the viewport height — useful for display headings in full-screen sections.
PX to VH Conversion Table if viewport height size is 1080px
| px | vh |
|---|---|
| 10px | 0.9259vh |
| 20px | 1.8519vh |
| 30px | 2.7778vh |
| 40px | 3.7037vh |
| 50px | 4.6296vh |
| 60px | 5.5556vh |
| 70px | 6.4815vh |
| 80px | 7.4074vh |
| 90px | 8.3333vh |
| 100px | 9.2593vh |
| 110px | 10.1852vh |
| 120px | 11.1111vh |
| 130px | 12.037vh |
| 140px | 12.963vh |
| 150px | 13.8889vh |
| 160px | 14.8148vh |
| 170px | 15.7407vh |
| 180px | 16.6667vh |
| 190px | 17.5926vh |
| 200px | 18.5185vh |
| 210px | 19.4444vh |
| 220px | 20.3704vh |
| 230px | 21.2963vh |
| 240px | 22.2222vh |
| 250px | 23.1481vh |