Media queries are a powerful ingredient of Responsive Web Design (RWD) supported by all modern browsers. A media query is a small bit of CSS code that works by asking (querying) the visitor’s device what its screen size is (how much space is available to display the website). The device provides the dimensions of the screen, and your code responds by delivering specific style rules for that resolution. This allows a fluid web design, navigation menu, or any fluid site element to not only grow and shrink, but also shift, move, and morph as necessary. The page and elements will custom to fit the screen displaying it, for maximize readability and usability.
Here's an example media query:
@media screen and (max-width: 768px)
{ body {background-color: orange; } }
This tiny line of code makes the background for all screen sizes smaller than 768px orange, changing the viewing experience drastically.
