Member-only story
PX, EM, or REM? Examining Media Query Units in 2021
Testing breakpoint behaviour in different browsers
I recently wrote an article where I called out Bootstrap for using pixel-based breakpoints. I mentioned that relative (e.g., em- or rem-based breakpoints) are better for accessibility. It was the reason I had switched to using em for media queries a while back. But since I don’t code anymore, I had never reviewed this decision.
After the article was published, this statement sparked a lot of discussion amongst fellow developers. While many developers I spoke to said they had never really thought about choosing em or rem over pixels, others strongly advocate one unit over the other.
So I was curious to examine the advantages and disadvantages of each. I came across Zell Liew’s article, which includes some brilliant experiments, and which ultimately reaches the conclusion that em-based breakpoints work best across all browsers, while pixel-based ones cause the most issues. However, this piece was written in 2016.
So let’s have a look at breakpoint units in 2021. Are we still facing the same issues for accessibility and browser compatibility? Or have modern browsers changed for the better or the worse?
