zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Design: Breakpoint nicht erkannt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.04.2014, 15:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2011
Beiträge: 10
Tosta befindet sich auf einem aufstrebenden Ast
Standard Responsive Design: Breakpoint nicht erkannt

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.04.2014, 16:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!

Es funktioniert, wenn du "min-device-width" in "min-width" änderst.
__________________
Gruß schatzi
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.04.2014, 16:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2011
Beiträge: 10
Tosta befindet sich auf einem aufstrebenden Ast
Standard

Du bist ein Schatz, Schatzi! Danke!

Tosta
Mit Zitat antworten
Antwort

Stichwörter
css, responsive design, viewport

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Responsive Design - Grafik Performance hakura Grafik, Design, Typografie 2 23.11.2014 10:27
Kachelmuster via html - Responsive Design freundlich SamuelS (X)HTML 10 31.01.2014 08:00
Responsive Design: Leere Fläche beim Header entfernen Shyne (X)HTML 6 26.06.2013 13:57
Responsive Design mit Framework oder lieber per Hand? OscarWilde CSS 7 18.09.2012 15:23
Iphone Responsive Design Horizontal Breite Problem Dav-88 CSS 1 31.07.2012 16:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:41 Uhr.