DEV Community

loading...

Discussion on: How to get Sizing in CSS right for Accessibility

Collapse
adam_cyclones profile image
Adam Crockett

Thanks for the post, I am struggling and have for a very long time, how do you do rem based media queries. I suppose it's calculated by the root so it's not much different to px. Its been so long I can't remember the benefits.

Collapse
kovah profile image
Kevin Woblick Author

Rem in media queries works exactly like in the rest of the CSS. We usually have something like this in out code:

.class {
  font-size: rem(18);

  @include media(sm) {
    font-size: rem(22);
  }
}

where media(sm) is a custom helper function for advanced media queries which translates to something like this:

@media screen and (min-width: 34rem) {
  font-size: rem(22);
}