HTML & CSS · Senior · Question 11 of 75
Why is em often recommended over px for media query breakpoints?
- ✓Correct answer:
emin media queries respects the user-set font size - 2
pxin media queries works incorrectly in Safari on iOS - 3
emin media queries is relative to the parent element's width
Explanation
In media queries, em and rem are based on the browser's initial font size (usually 16px), not on page styles. If a user enlarges the base font, the layout switches to the "narrow" version sooner - text won't be cramped. With px that doesn't happen. Tailwind v4 defines breakpoints in rem for the same reason.