Instruction: Describe the differences between relative and absolute units, and why relative units are preferred in responsive design.
Context: This question assesses the candidate's understanding of CSS units and the significance of choosing relative units (e.g., em, rem, vw, vh) to create adaptable, responsive layouts.
Official answer available
Preview the opening of the answer, then unlock the full walkthrough.
Relative units, such as em, rem, vw (viewport width), and vh (viewport height), are dynamic. They adjust according to the parent element's font size, the root element's font size, or the dimensions of the viewport, respectively. This adaptability makes them instrumental in creating designs that are fluid and responsive. For instance, using vw for font sizes can make text adjust fluidly across screen sizes, enhancing readability without manual adjustments for each device.
On the other side, absolute units like px (pixels), pt (points), and cm (centimeters) are static. They define measurements that do not change based on the user's screen size or resolution. While absolute units can be useful for print stylesheets or when a precise...