benjaminjohnson.me

Using rem-based media queries

One of my favorite CSS "tricks" is the rem-based media query:

@media screen and (min-width: 48rem) {
  /*  Styles for tablets and above */
}

Instead of using pixels for the width of the screen, you can define the width of the screen using rem units. One key benefit to this is accessibility.

I often bump my font size up larger than the default. While I can see fine without it I find the larger font sizes relaxing on my eyes.

Writing media queries like this allows you to scale layout with a user's font-sizing preferences. So if your user has a tablet screen (~768px) and a 150% font size, they would see the mobile layout. This mobile layout is more helpful if your font is taking up a significant portion of your tablet-sized screen width.

Lastly, a couple caveats to this approach. First, if you're actually changing the font-size on the html element, this might not be for you. Personally, I've never had to actually change the root font-size dynamically so this is rarely a concern for me.

Second, rem-based media queries can take a while to get used to. You'll have to do some math if you need to figure out standard screen sizes. For example, 768px divided by a root font-size of 16 results in 48rem. That said, I think the benefits (accessibility) outweigh the cost (unfamiliarity).

Thanks for reading! Let me know if you enjoyed this—you can reach out to me on Twitter or connect with me on LinkedIn (make sure to mention this post if you do connect!)