Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Media Queries: Best Practices

CSS Media Queries: Best Practices

/* 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;
  }
}
@tomygrenier

This comment has been minimized.

Copy link

tomygrenier commented Nov 25, 2019

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?

@basham

This comment has been minimized.

Copy link
Owner Author

basham commented Nov 25, 2019

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?

@preagan

This comment has been minimized.

Copy link

preagan commented Dec 7, 2019

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?

@tomygrenier

This comment has been minimized.

Copy link

tomygrenier commented Dec 9, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.