CSS-Media-Query min-width funktioniert nicht richtig

Habe ich eine HTML wie:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
    <link rel="stylesheet" href="test.css" />
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

und mein CSS ist:

input {
  background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    input {
        background-color: green;
    } 
}

nun die CSS gilt, wenn das Fenster auf 909px Breite. Natürlich nicht um ein scrollbar-problem. Ich bin immer verrückt mit diesem einfachen problem. Getestet habe ich es mit Chrome und IE10 beide das gleiche.

Kann jemand bitte helfen, was mache ich hier falsch?

InformationsquelleAutor Tuan | 2013-05-21
  1. 9

    Habe ich diese HTML:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

    Wird ein einfaches media query Erklärung wie diese hier:

    @media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

    Ist es großartig hier: http://jsbin.com/ubehoy/1

    Debugging mit Firefox Responsive Design View und ziehen Sie den resizer, es ändert sich die input Hintergrundfarbe korrekt, wenn die Breite Grenzen erreicht sind.

    Versucht mit Chrome 26.0.1410.64 m/IE 10 und es funktioniert auch Super.

    • Sie haben Recht, für jede seltsamen Grund mein chrome-Maßnahmen 900pixel obwohl Fenster ist 1000 Pixel. obwohl html und css sind genau die gleichen. ich öffnete ein Fenster, setzen Sie die beiden Dokumente in zwei Registerkarten, um sicherzustellen, dass die Breite ist die gleiche. in meinem lokalen Dokument Chrom Maßnahmen 900px 🙁
    • Verdammt, ich war dumm. das tab wurde bei zoom-Stufe verbrachte Stunden auf das -_- ich sollte die Arbeit so spät... danke!
    • :D... das ist eine schwierige Sache, zu betrachten, wirklich!
    • big upvote für @user1974505 ich hatte das gleiche dumme zoom auf 110%. Sobald ich es gelesen habe habe ich ein /facepalm und auf Werkseinstellung zurückgesetzt... funktioniert wie ein Charme!
    • Mich auch, und es stellt sich heraus, es ist eine Lupe in der Adressleiste, wenn nicht bei 100% - ich nicht.
    • DANKE!!! Ich werde NIE diesen Fehler wieder. Ich ging sogar so weit zu bestimmen, es arbeitete in einer pixel-Menge um 10% zu spät... ich habe den Berechnungen und wusste nicht, ich war bei 90% zoom :/ getestet habe ich in 2 anderen Browsern und ich es irgendwie geschafft, das gleiche zu tun...
    • yep, Gleiches problem. Ich kann es nicht glauben...
    • Ich hatte genau das gleiche problem. Und ja, die Lupe war! Wusste nicht, dass das Auswirkungen auf die berichteten pixel Breite der Seite.
    • Hatte gerade das gleiche problem und meine Lupe war zu.. vielen Dank so viel für dies oder das hätte ich nie gefangen.
    • Lupe scheitern für mich auch... 🙁
    • Nur der check-in und sagen, dass das Zoomen war wirklich wrecking mich, und ich bin sicher, ich würde nicht gesehen haben, dies auf meine eigene, danke!

    InformationsquelleAutor Leniel Maccaferri
  2. 1

    Habe ich mir das geschehen von Zeit zu Zeit. Stellen Sie sicher, dass Sie Ihr tab nicht gezoomt (⌘0)

    InformationsquelleAutor Zach Parduhn
  3. 0
    @media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

    Dies funktioniert, aber stellen Sie sicher, überprüfen Sie die ein - /Auszoomen. (Ich habe diese Antwort aus den Kommentaren, wie es scheint, dies ist die big fangen hier Rum.. ich fiel für es auch)

    InformationsquelleAutor Victor
Schreibe einen Kommentar