# CSS Media Queries: Best Practices

- [Media queries have many features](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), 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](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).
- Until there's wider [`rem` support within media query](http://fvsch.com/code/bugs/rem-mediaquery/),
[`rem` should be avoided in media query definitions as well](http://codeboxers.com/em-vs-px-vs-rem-in-media-queries/).
- 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.

```css
/* 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;
  }
}
```