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 dimensions.
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) vi

Carlos Diaz Charliechin