DEV Community

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

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

gitrishabhsingh profile image Rishabh Singh ・1 min read

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

Discussion (7)

pic
Editor guide
Collapse
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 :)

Collapse
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!

Collapse
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).

Collapse
xseman profile image
Filip

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

Collapse
brianleefritz profile image
Brian Fritz

How else would you do it?

Collapse
jwp profile image
John Peters • Edited

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

Collapse
codebug profile image
Gospel Chinyereugo

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