Question 1

What is the difference between em, rem and px?

Accepted Answer

px (pixels) is an absolute unit. em is relative to the font-size of the parent element. rem is relative to the root (html) font-size, which is typically 16px. rem is best for global scaling and accessibility.

Question 2

What is vw and vh in CSS?

Accepted Answer

vw (viewport width) and vh (viewport height) are units relative to the browser viewport size. 1vw = 1% of viewport width, 1vh = 1% of viewport height. They are perfect for responsive layouts and full-screen elements.

Question 3

Why should I use rem instead of px?

Accepted Answer

Using rem units makes your design more accessible and responsive. When users change the browser base font-size for accessibility, rem-based typography scales accordingly. This improves readability for users with visual impairments.

Question 4

How do I convert px to em?

Accepted Answer

Divide the pixel value by the parent's font-size. For example, if the parent has font-size: 16px, then 24px = 24/16 = 1.5em. Use the tool above to convert instantly with custom base font size.