So what does a CSS media query look like and more importantly, how does it work?
Enter the following code at the bottom of any CSS file and preview the related web page. Alternatively, you can open example_02-01
:
body { background-color: grey; } @media screen and (min-width: 320px) { body { background-color: green; } } @media screen and (min-width: 550px) { body { background-color: yellow; } } @media screen and (min-width: 768px) { body { background-color: orange; } } @media screen and (min-width: 960px) { body { background-color: red; } }
Now, preview the file in a browser and resize the window. The background color of the page will vary depending upon the current viewport size. We'll cover how the syntax works in more detail shortly. First, it's important to know how and where you can use media queries.