Media Queries allow you to have different styles 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 mobile first; meaning that you create your page starting with the design and content
of the mobile version. You may think that with some scalable sizes ( %, vw or vh ), your page will adapt perfectly to any device. But it will not. Maybe
for some very basic design, but certainly not for more common or complex pages!
paddings and so on in order to keep your site comfortable and readable. You will also likely want to add more content and fill in the space created by the screen size.
There are more operators beyond the main two, a full list with examples can be found [https://css-tricks.com/logic-in-media-queries/](in this article from CSS Tricks.)
Beyond the core uses of media queries for mobile-first web design shown above, media queries can do a lot, especially for web accessibility. Here are just a few examples:
1. Adjusting for screen readers that convert website text to speech for the visually impaired (for example, ignoring non-essential text).
* [CSS Tricks Standard Device Widths Article](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
* [Ethan Marcotte A List Apart Atricle on Responsive Web Design](https://alistapart.com/article/responsive-web-design)
* [Brad Frost 7 habits of highly effective media queries](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/)
* [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/)