A Query, if you will...

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
}

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; }
}

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;
     }
`

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!