Media queries allow you to design a website differently for different devices/screen sizes. Their introduction in CSS3 has greatly eased the building of responsive webpages.
The best approach when designing a responsive website is to think <em>mobile first</em> - meaning that you design the mobile version of your site first and scale up for larger devices. Using relative units of size (like %, vw or vh) will not guarantee your page adapts perfectly to any device, especially for complex layouts! Media queries let you specify <em>breakpoints</em> where different styles will be applied.
When designing your page for smaller devices, you should focus on the main content. On a bigger screen, you will want to adjust font sizes, margins, padding, etc. to keep your site readable, but you may also want to add secondary content to fill in the space created by the screen size.
Additional tips for using media queries, such as the `not` operator and examples of greater specificity, can be found [https://css-tricks.com/logic-in-media-queries/](in this article from CSS Tricks.)
* [How to make media queries work on older browsers](https://www.templatemonster.com/blog/css-media-queries-for-all-devices-and-browsers-including-ie7-and-ie8/)