DEV Community

loading...
Cover image for A Query, if you will...

A Query, if you will...

Max Zander
Professional Opera Singer turned Full-Stack Developer
・2 min read

So here's a query for you: Do you know about media queries?

If you don't, I'd like to take a moment today to introduce you to them.


So, what exactly is a media query?

Basically, a media query is something used in CSS to set certain rules conditionally. Media queries are super useful if you want to make your page/project responsive (fitting to various screen sizes).

We define media queries by using the @media rule. Frequently, we see if used in the following way:

@media screen and (max-width: 1025px){
     // conditional CSS goes here
}
Enter fullscreen mode Exit fullscreen mode

where it says max-width may appear a little differently (ie. min-width, etc.)

Media queries can be super helpful if you want something to only appear in a desktop view or perhaps appear differently in a mobile view. An example of that would be having a button that does not display on mobile devices/screens smaller than 812px:

@media screen and (max-width: 812px){
     button { display:none; }
}
Enter fullscreen mode Exit fullscreen mode

BONUS If you have been following along with my blog posts and have been using styled-components, you can use media queries in the following way:

const ConditionalBackground = styled.div`
     background-color: #ff6b35;
     @media screen and (max-width: 960px){
          background-color: #15b7d7;
     }
`
Enter fullscreen mode Exit fullscreen mode

So why is this important?

Like I said, media queries are super helpful for formatting your design to fit various screen types. Nowadays, so many people use mobile devices to surf the web or check out apps. If you want people to want to use your applications, it will certainly be to your benefit to make sure that what they see is what you intend.

If you're still reading, here's a final query for you: what are you waiting for?! Go give it a shot!

Discussion (0)