Input
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Media Query Example</title> <style> body { background-color: white; color: #333; font-family: sans-serif; padding: 20px; transition: background-color 0.3s ease; } @media screen and (min-width: 600px) { body { background-color: lightblue; /* Applies when screen width >= 600px */ } } </style> </head> <body> <h1>Resize the Browser</h1> <p>The background will turn light blue on screens 600px wide or more.</p> </body> </html>