Units in Media queries


Units in Media queries


  • If your content is mostly image-based, pixels might make the most sense. If your content is mostly text-based, it probably makes more sense to use a relative unit that’s based on text size, like em or ch.

  • It’s best to choose your breakpoints based on your content rather than popular device sizes, as those are subject to change with every technology release cycle.

  • You can combine media queries so that the styles only apply when all the conditions are true.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}