Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { background-color: #1c87c9; } @media screen and (max-width: 411px) { body { background-color: #cce5ff; } } @media screen and (min-width: 768px) { body { background-color: #eee; } } @media screen and (max-width: 962px) and (min-width: 450px), (min-width: 1366px) { background-color: #333; } </style> </head> <body> <h2>@media rule example</h2> <p>Resize the browser to see the effect.</p> <p>Media queries set the background-color to light gray if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p> </body> </html>