Instantly convert REM to VH and VH to REM
A simple and fast tool to convert REM units to VH units and vice versa for your web designs.
How to Convert REM to VH
Step 1: Determine the Font Sizes
You need two values: the font-size of the direct parent element in pixels, and the target viewport height (e.g., 1080px for a standard monitor).
Step 2: Use the Conversion Formula
The formula is: `(REM Value * Parent Font Size) / (Viewport Height / 100)`.
Result in VH = (REM * Parent PX) / (Viewport Height * 0.01)
Step 3: Example Calculation
If you want to convert 3rem to `vh` for a 1080px viewport, and the parent’s font size is 24px, the calculation is:
(3 * 24) / (1080 / 100) = 72 / 10.8 = 6.667
So, 3rem is equal to 6.667vh in this context.
Common REM to VH Reference
A quick reference table based on the parent font size and viewport height set above.
REM to VH Converter Information
Understanding REM Units
The `rem` unit is a relative unit of measurement in CSS. It is relative to the font-size of its direct parent element. This makes it powerful for creating components that scale within themselves, but can sometimes lead to complex calculations in nested elements.
Understanding VH Units
The `vh` unit stands for “viewport height”. It is a relative unit where 1vh is equal to 1% of the browser’s viewport height. This is particularly useful for creating elements that should take up a certain portion of the screen’s height, regardless of the device.
Why Convert REM to VH?
Converting `rem` to `vh` is useful when you want to make a locally-scaled element (`rem`) responsive to the overall viewport height. This is helpful for:
- Vertically Proportional Sizing: You can size an element based on its parent’s font size (`rem`) and then convert that to `vh` to make it scale with the screen’s height.
- Full-Height Components: For components whose internal spacing is defined in `rem`, converting to `vh` can help ensure the entire component fits correctly within a full-height layout.
- Advanced Responsive Techniques: Combining `rem` and `vh` allows for complex layouts where elements scale based on both their local context and the global viewport dimensions.