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 (min-width: 200px) { body { background-color: #51d675; } } @media screen and (min-width: 600px) { body { background-color: #ccc; } } @media screen and (max-width: 800px) and (min-width: 500px), (min-width: 1000px) { div.box { font-size: 40px; padding: 50px; border: 6px solid #000; background: #eee; } } </style> </head> <body> <p> To see the effect, resize the browser window. </p> <p> Change the appearance of the DIV on different screen sizes. </p> <div class="box">DIV</div> </body> </html>