- 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 is16px
, then the breakpoint indicating mobile width in profile orientation would be20em
(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;
}
}
"Never use media queries to define styles for the smallest viewport size." I would edit this point, because only works for progressive enhancement, not for graceful degradation(at least not for this best practices list).