CSS Media Queries: Best Practices

css-media-queries-best-practices.md

CSS Media Queries: Best Practices

• Media queries have many features, but min-width is the most practical one, the one you should assume to use most of the time.
• Only use em within media query definitions, never pixels.
• Until there's wider rem support within media query, rem should be avoided in media query definitions as well.
• Assuming mobile is 320px and the body font size is 16px, then the breakpoint indicating mobile width in profile orientation would be 20em (320/16).
• Choose breakpoint values to serve the content, not to serve device deminsions.
• Never use media queries to define styles for the smallest viewport size.
• Use media queries to “enhance” or add or alter styles when the browser has a wider (or taller) viewport.

/* Style for every viewport width. */
.Component {
  background-color: tomato;
  color: black;
}

/* Style for viewports greater than 320px wide. */ 
@media (min-width: 20em) {
  .Component {
    background-color: blue;
  }
}

Thanks for posting this! I'm trying to understand this one detail...

Until there's wider rem support within media query, rem should be avoided in media query definitions as well.

Neither of the two links referenced seem to be working for me, and according to Can I Use, rem support seems to be universal.

So what am I missing? Excepting very old browsers, wouldn't rem use now be OK?

Hi @basham,
I like this way of doing. I will now integrate it in my new projects.
And as @preagan says, links about REM are broken. Before reading here, I was thinking that working with rem was easier 'cause em as a lot of inheritances and it's harder to follow what size will inherit elements from their parents.

Thanks for your post. I like to learn about working better. :)

@preagan At the time I wrote this nearly four years ago, rem support was a little iffy. At this point, yes, rem would be perfectly fine to adopt, without reservation.

@tomygrenier I use rem almost exclusively in my projects (enterprise web apps). It fits many more use cases than other CSS units.

I'm still wrestling with identifying a new recommendation for the units within a media query. I've found some articles on this topic from a couple years ago, along with some counter arguments. If you all come to come conclusion yourself, I'd like to hear it. If I settle on a new direction, I'll update the recommendations in this Gist. Thanks for pointing out the broken links!

1. PX, EM or REM Media Queries? (March 2016)
2. Units for Media Queries – different conclusion (April 2017)
3. Don't Use Em for Media Queries (November 2017)

"Never use media queries to define styles for the smallest viewport size." I would edit this point, because only works for progressive enhancement, not for graceful degradation(at least not for this best practices list).