CSS Media Queries: Best Practices
- Media queries have many features, but
min-widthis the most practical one, the one you should assume to use most of the time.
- Only use
emwithin media query definitions, never pixels.
- Until there's wider
remsupport within media query,
remshould be avoided in media query definitions as well.
- Assuming mobile is
320pxand the body font size is
16px, then the breakpoint indicating mobile width in profile orientation would be
- 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) vi