Wenn ich die Breite eines Browser-Fensters mit der folgenden Web-Seite verändere, wird der Breakpoint bei 500px nicht erkannt. In einem Viewport mit weniger als 500 Pixel Breite sollte der Hintergrund blau sein, ab 500 Pixel Breite sollte er grün sein. Das funktioniert so aber nicht: der Hintergrund ist immer grün. Ich habe mit Firefox und Safari unter OS X und mit Firefox und IE unter Windows getestet.
Andere responsive Websites (z.B.
die von Foundation) reagieren richtig auf die Änderung der Fensterbreite. Was stimmt mit meinem HTML- oder CSS-Code nicht?
HTML-Code:
<html>
<head>
<style type="text/css">
body {
background-color: blue;
}
@media only screen and (min-device-width: 500px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<p>
Ein Test.
</p>
</body>
</html>
Im Modus „Bildschirmgrößen testen“ des Firefox funktioniert alles richtig, der Breakpoint wird erkannt, die Hintergrundfarbe wechselt!
Danke für die Hilfe!
Tosta