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

View post

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.

Kevin Woblick • Oct 8 '19

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);
}