DEV Community

Cover image for Is it good to use multiple [@media-query] in css to make it responsive layout?
Rishabh Singh
Rishabh Singh

Posted on

Is it good to use multiple [@media-query] in css to make it responsive layout?

I am just want to know, Is it good or not as a front end developer?

Top comments (7)

helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Not only good, but necessary!

Different @mq represent different screen sizes, your product (or app or webpage) will be seen in multiple devices (that have different screen sizes), so you need to cover them!

1 @mq for mobile, 1 @mq for tablet and 1 @mq for normal PC screen should be enough in most cases :)

luisaugusto profile image
Luis Augusto

It's definitely fine to use for styling at certain breakpoints, but if you find yourself making a bunch of media queries for just a few properties, there might be a better way to adjust them by using more responsive values. It all depends of the use case though!

vishnubaliga profile image
Vishnu Baliga

Yes! Especially when you writing your styles in multiples files.

For example, I've been using SCSS and I maintain different files for each component, and I write media queries for each component within that file itself, rather than having one single media query and stuffing all the responsive styling inside it, which will create a lot of ambiguity, especially when you are trying to scale them further(in larger applications).

xseman profile image

In software there isn't "good", if you're not technically limited, then what works for you is good enough.

brianleefritz profile image
Brian Fritz

How else would you do it?

jwp profile image
John Peters • Edited

Media queries are not necessary when using the HTML 5 Grid layout with auto-fit and minmax .parameters.

codebug profile image
Gospel Chinyereugo

It's okay, yeah. As long as it works for you.