Base Values
16.00
16.00px
1.0000
1.0000rem
1.0000
1.0000em
12.00
12.00pt
0.8333
0.8333vw
1.4815
1.4815vh
• rem/em: Based on root font-size (default 16px)
• vw/vh: 1% of viewport width/height
• pt: Print points (1pt = 1/72 inch)
📏 What is CSS Unit Converter?
CSS Unit Converter transforms between px, rem, em, pt, vw, and vh units used in web development. It calculates accurate conversions based on root font-size (default 16px) and viewport dimensions. Essential for responsive web design, accessible font sizing, and mobile/desktop layout work. Copy converted CSS values with one click to paste directly into your code.
📊 CSS Unit Comparison
| Unit | Reference | Characteristics |
|---|---|---|
| px | Fixed pixel | Absolute unit, responds only to browser zoom |
| rem | Root font-size | Based on html element, consistent scaling |
| em | Parent font-size | Compounds when nested, relative scaling |
| vw | Viewport width | Responsive to screen width |
| vh | Viewport height | Responsive to screen height |
| pt | 1/72 inch | For print media, not recommended for web |
💡 CSS Unit Best Practices
- Font sizes: Use rem for accessibility (respects user settings)
- Layouts: vw/vh for responsive design; use dvh for mobile address bar issues
- Spacing: rem or px for consistency in margins and padding
- Media queries: em recommended (better response to browser zoom)
Frequently Asked Questions
What is the difference between rem and em?▼
rem is based on the root (html) element font-size, while em is based on the parent element font-size. rem maintains consistent sizing, while em compounds when nested, making calculations harder to predict.
What is the mobile vh issue?▼
On mobile browsers, the vh value changes when the address bar appears or disappears, causing layout jumps. Use CSS dvh (dynamic viewport height) or svh (small viewport height) to solve this issue.
Why is 16px the default?▼
Most browsers set their default font-size to 16px. Therefore 1rem = 16px. Some developers use the 62.5% trick (setting html font-size to 62.5%) to make 1rem = 10px for easier calculations.
What is CSS Unit Converter?
Convert between CSS units including px, rem, em, %, vw, and vh. Set base font size for accurate rem calculations. Essential for building responsive websites.