DEV Community

How to get Sizing in CSS right for Accessibility

Kevin Woblick on October 07, 2019

While developing the frontend for a website or web application, accessibility is an important topic in order not to lock out people with disabiliti...
Read full post
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 •

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