What Is Media Query?

Media queries are little bits of magic that make your website look like it's on crack. You've probably seen them before: they're the CSS rules that tell a web page how to adapt itself depending on what kind of device it's being viewed on. When they were first introduced, media queries were intended to be used with responsive design, a technique for creating websites that can adapt their layout based on the screen size they're being displayed on. Since then, media queries have become so much more than that! They let you load different stylesheets and scripts depending on whether the user has JavaScript enabled or is using a mouse. They even allow you to hide content until certain conditions are met, which is how we know plenty of people out there who have yet to hear about media queries (or don't want anyone else to know about them). Media queries are the best. They let us check whether our site is being viewed on a phone, tablet, or desktop computer and then allow us to apply different stylesheets to each type. For example, you can write a media query that checks for screen size to make your site look better on mobile devices. If the screen size is less than 480 pixels wide, then it's probably a phone, and you can apply some CSS that makes the site look more compact and easier to use with one hand. But if it's over 480 pixels wide, then it's probably a tablet or computer, and you can apply other CSS that makes the site look more spacious and great for browsing with two hands. You can also use media queries to check for additional features, like whether or not there is a touchscreen or whether or not there's sound turned on. That's why we love media queries!