Re-evaluating px vs em in media queries | Keith J. Grant

An overview of the state of media queries and accessible overrides (page zoom, text zoom, min/max font size settings etc.), seeking to determine which of em, rem, or px is the best option. Turns out that Safari is still doing things differently and still preventing their being a "winner", but pixels are your most consistent option, whilst em is likely the most broadly accessible (so really, no change).

Comparison chart of how media queries using the different units behave in Chrome, Firefox, and Safari. Regular zoom is identical across all combinations; font size changes are different in Safari to the other two, where no change occurs for any unit option; and in minimum font size, Safari throws another curveball and does scale media queries using em but nothing else, whilst the other browsers don't change at all.
Safari isn't even internally consistent. Why scale em for minimum font size, but not regular font size overrides?

On Safari still being the core issue:

I was disappointed to see Safari is still an outlier, where ems and rems don’t scale in media queries based on the user’s default font size.

On the reality of an inconsistent system (not sure I agree with this as a takeaway, but it does track with the data):

There is no clear-cut winner I can point to after looking at this. It probably depends on what you want to prioritize.

If you want consistency across all browsers, you should now use px in your media queries.

Explore Other Notes

Newer

Debug iOS Safari with Xcode

Need to debug an iOS or iPadOS device but don't have one? Got a Mac of some kind? Turns out, Xcode is a pretty comparable environment to the real deal and almost any mobile Safari bug can be […]
  • An overview of the state of media queries and accessible overrides (page zoom, text zoom, min/max font size settings etc.), seeking to determine which of em, rem, or px is the best option. Turns […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.