Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</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>Beispiel für @media</h2> <p>Ändern Sie die Größe des Browsers, um den Effekt zu sehen.</p> <p>Mediaabfragen stellen die Hintergrundfarbe auf hellgrau ein, wenn das Ansichtsfenster 600 Pixel breit oder breiter ist, auf grün, wenn das Ansichtsfenster zwischen 200 und 599 Pixel breit ist. Wenn das Ansichtsfenster kleiner als 200 Pixel ist, ist die Hintergrundfarbe blau.</p> </body> </html>