Add responsiveness to reactjs landing page

Question

We have large react application without using any UI framework, we build all UI component our own.

Now we need to make landing page portion responsive (it's part of the application), and we need to add a lot of @media query.

The first thing come to my mind is tailwindcss library that could help on that, it's more lightweight than bootstrap, and materialUI.

But I am not sure would that would be a best practice here to include a whole UI utility for responsiveness, or if not, is there other way to achieve responsiveness without dealing with a lot of @media query?

Answer 1

You could try using the CSS clamp function. This function takes
in three arguments. The first being the minimum value, the second
one the preferred value and a maximum value. For example:

.element {
  width: clamp(100px, 75%, 300px);
}

And here's how you would do the exact same thing with media queries:

.element {
  width: 75%;
}

@media (max-width: 768px) {
  .element {
    width: 100px;
  }
}

@media (max-width: 1200px) {
  .element {
    width: 300px;
  }
}

Here's a link to the documentation on the CSS clamp function:
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

I hope this helped you.