Skip to content

Breakpoints

A rolling discussion tonight regarding media queries (breakpoints) and the units to use. em, px, rem? This (zellwk.com/blog/media-query-units) article suggests that em¬†behaves the most consistently across all browsers, but then digging into the comments, there’s a counter argument for px.

I like to use em/rem for elements that are truly relatively scaled. So things like borders and absolutely positioned elements I generally stick to px units.

Personally, I prefer px. em and rem are both relative units, units that scale based on font-size set by the user (or defaulted in the browser). Now take mobile: what if the user is using enlarged fonts. If the media queries (breakpoints) are also scaled because of the units used, how will that impact mobile?

Feels like I need to experiment more around this, but to quote a colleague…

just do what you want and let the browsers deal with the headache

…which frankly, sometimes is a good call.

Leave a Reply

Your email address will not be published. Required fields are marked *