Media Query Breakpoints in rem vs px

rem vs px in Media Queries

Whether to use rem or px for media query breakpoints is one of the most debated topics in CSS. Here is a factual comparison.

The Key Difference

When a user changes their browser's default font size:

• px breakpoints — The breakpoint stays at the same viewport width regardless of font size changes.
• rem breakpoints — The breakpoint shifts. A user with a 20px default hits 48rem at 960px instead of 768px.

Common Breakpoints Comparison

Name	px	rem (base 16)	rem (base 20)
Mobile	640	40rem	32rem
Tablet	768	48rem	38.4rem
Laptop	1024	64rem	51.2rem
Desktop	1280	80rem	64rem
Wide	1536	96rem	76.8rem

The Case for rem Breakpoints

With rem breakpoints, a user who increases their font size also triggers a narrower layout sooner. This can be beneficial because:

• Larger text needs more horizontal space per line
• Switching to a single-column layout earlier accommodates wider characters
• The content-to-viewport ratio stays more consistent

The Case for px Breakpoints

px breakpoints are device-centric:

• They correspond to known device widths (iPhone, iPad, etc.)
• Behavior is predictable and easier to test
• Most CSS frameworks (Tailwind, Bootstrap) use px breakpoints

Browser Behavior Nuance

Safari handles rem in media queries differently from Chrome and Firefox in some edge cases. Specifically, Safari has historically used the default 16px for media query rem calculations regardless of the page's html font-size setting. Chrome and Firefox use the user's configured default font size (not the CSS-set root size).

em as a Third Option

Some developers prefer em for media queries because browser support and behavior is the most consistent across engines. Since media queries do not have a parent element, em and rem behave identically in this context in most browsers.

Recommendation

Use rem (or em) breakpoints if accessibility is a top priority. Use px breakpoints if you need predictable device-width targeting. Both are valid approaches.