Question 1

What is the difference between rem and em?

Accepted Answer

rem (root em) is relative to the root (html) element's font size, while em is relative to the current or parent element's font size. In practice, rem is more predictable because it's not affected by nesting. For example, when the root font size is 16px, 1rem = 16px. If a parent has font-size: 20px, then 1em in the child equals 20px.

Question 2

What is the difference between vw/vh and percentage %?

Accepted Answer

vw/vh are always relative to the viewport (browser visible area) dimensions — 1vw = 1% of viewport width. The % unit is relative to the parent element's corresponding property (e.g., font-size % is relative to parent font-size, width % is relative to parent width). For full-screen responsive layouts, vw is the better choice.

Question 3

Why is rem better than px for responsive design?

Accepted Answer

The rem approach allows page elements to scale proportionally based on the root font size, enabling adaptive layouts across different screen sizes. By dynamically setting the html element's font-size via JavaScript, the same CSS can render well on phones, tablets, and desktops. Compared to fixed px values, rem is more flexible and easier to maintain.

Question 4

Are pt, cm, mm, and in useful in web development?

Accepted Answer

pt (points), cm (centimeters), mm (millimeters), and in (inches) are primarily used in print styles (@media print) to precisely control physical output dimensions, such as margins for @page rules. On screens, these units are converted to pixels based on device DPI (default 96 DPI), but actual display varies by device.

CSS Unit Converter

All Unit Conversions (based on 16 px)

CSS Unit Converter Guide

Supported Units

Use Cases

常见问题

相关工具