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;
  }
}

@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).