VH → REM Converter
Converting from VH to REM is common when switching from useful for full-height layouts and hero sections. to useful for typography scaling and accessibility. in CSS projects.
Conversion Form
About the Unit
VH (Viewport Height): Like VW, VH is a relative unit, but instead of being based on the viewport width, it is based on the height of the viewport. 1vh represents 1% of the viewport height, meaning that if the viewport height is 1000px, 1vh will be equal to 10px. The vh unit is widely used when you want elements to occupy a percentage of the screen height, making the design more adaptable to different device sizes. A common use case is to create 'hero sections' or headers that occupy the full height of the screen. For example, if you set an element’s height to 100vh, it will occupy 100% of the viewport height, ensuring that the content automatically adjusts to the screen height of the device, regardless of its resolution. This unit is also useful for scroll layouts on long pages, where the height of elements is crucial for navigation.
Pro Tip: vh → rem
Be cautious with vh on mobile as address bars can hide content. Rem is better for scalable typography.
Quick Reference: Unit Conversion by Tens
| VH | REM |
|---|---|
| 10vh | 1.08rem |
| 20vh | 2.16rem |
| 30vh | 3.24rem |
| 40vh | 4.32rem |
| 50vh | 5.4rem |
| 60vh | 6.48rem |
| 70vh | 7.56rem |
| 80vh | 8.64rem |
| 90vh | 9.72rem |
| 100vh | 10.8rem |
| 110vh | 11.88rem |
| 120vh | 12.96rem |
| 130vh | 14.04rem |
| 140vh | 15.12rem |
| 150vh | 16.2rem |
| 160vh | 17.28rem |
| 170vh | 18.36rem |
| 180vh | 19.44rem |
| 190vh | 20.52rem |
| 200vh | 21.6rem |
| 210vh | 22.68rem |
| 220vh | 23.76rem |
| 230vh | 24.84rem |
| 240vh | 25.92rem |
| 250vh | 27rem |
Live Unit Preview
See how different CSS units affect the size of the box below:
10px
10rem
10em
10%
10vw
10vh
Common Mistake
Rem is better for scalable design, vh can cause issues on mobile screens.
Real Code Example
/* Mobile-first card with vh → rem */
.card {
padding: 0vh; /* undefinedrem */
font-size: 1.5rem;
width: min(90vw, 40ch);
}Frequently Asked Questions About VH
When should I use vh instead of vh?
Use vh for vertical scaling and full-height sections.
How many vh is 1vh?
1vh = 1% of the viewport height.
Is vh affected by screen size?
Yes, it changes with browser height.
Is vh good for hero sections?
Yes, it's perfect for full-screen components.
Keyboard Shortcuts
- Ctrl + C: Convert
- Ctrl + I: Invert units
- Esc: Reset values