DEV Community

Discussion on: Responsive design in React components?

Collapse
victorocna profile image
Victor Ocnarescu

How about a zero packages approach using css media queries? They are clean, easy to write and by using them you don't need to use javascript. Just css

Collapse
jrx2 profile image
Juan R. Rodríguez Author

Thanks for your comment.
At first I thought the same thing and tried to find a way to do this with css only but media queries always work depending on the size of the device/viewport, or its orientation/resolution, it doesn't work when what is important for us is to apply styles depending on the space an element is going to be able to occupy at a given time.
There is an interesting discussion about this on the w3c github and the recommended way for this seems to be the use of js.

Collapse
victorocna profile image
Victor Ocnarescu

That's actually right. First time I read your article I did not understand that you wanted different styles depending on the "space" of the element and not on the device/viewport. I have not yet encountered this scenario in real projects though, but it is a nice approach, will definitely use it if I ever need it.