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

Hi @basham,
What you mean by «Never use media queries to define styles for the smallest viewport size»? And why?
Do you mean to use «greater than» for the media queries?

Progressive enhancement is about starting with a great baseline experience that can be enhanced as the device capabilities or context of use allows. Mobile-first design is the idea of progressive enhancement, with a specific focus on the mobile experience. This perspective allows us to be sensitive about screen size, computational power, battery, network, input, etc. We should treat increased viewport size as a feature enhancement, and we can use media queries to help us. Determine the smallest viewport size you will support. Maybe it's 320px wide. Maybe it's a tablet size. Maybe something else. As you gain more viewport size beyond that baseline, you can alter the content to better fit within the new space. In practice, scaling up a design in this way is much easier than scaling down. It typically involves fewer lines of CSS and fewer properties being overwritten.

If a style will be used for every viewport size, then it doesn't need to be wrapped in a media query. But then the style can change via media queries as you have more viewport size available.

min-width: 20em means greater than or equal to 20em.

Does that help clarify your questions? How would you suggest I reword the document to clarify it?

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)