Clever CSS for responsive design

CSS is weird. It’s neither a programming language nor a design program such as Photoshop. It can be tedious and time-consuming if you’re not a front-end ninja, especially the responsive part.

Many devs won’t spend their time doing clumsy CSS to get mediocre results. I don’t blame them at all. It’s a pragmatic choice.

I was looking for new techniques to improve my CSS skills, especially media queries. Many blog posts recommend not using them anymore when it’s possible.

For now, I can’t do what I want without using a few of them, but I found a technique that reduces the number of media queries drastically. It leverages the benefits of CSS variables:

@media (min-width: 360px) {
  :root {
    --rwd-factor: 0.8;
  }
}

@media (min-width: 768px) {
  :root {
    --rwd-factor: 1;
  }
}

You can use it like this way:

h1 {
    font-size: calc(2.5rem * var(--rwd-factor));
}

You can easily style for various screen sizes by using a common factor while keeping the CSS stylesheet pretty light.

I learned it from this blog post. Of course, it’s not the only possible approach, but I found it efficient.

You won’t achieve the highest level of accuracy, but it just works.