CSS-Medienabfrage min-width nicht korrekt

arbeiten habe ich eine HTML wie:CSS-Medienabfrage min-width nicht korrekt

<!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 meine CSS ist:

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

jetzt die CSS gilt, wenn das Fenster auf 909px Breite. Offensichtlich kein Scrollbar-Problem. Ich werde verrückt mit diesem einfachen Problem. Ich habe es mit Chrome und IE10 beide gleich getestet.

Kann mir bitte jemand helfen, was ich hier falsch mache?

Quelle

2013-05-21 Tuan

ich diesen HTML verwendet:

<!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>

Mit einer einfacheren Medien Abfrage Erklärung wie diese:

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

input { 
     background-color: green; 
    } 

}

Es funktioniert großartig, hier: http://jsbin.com/ubehoy/1

Debuggen mit Firefox Responsive Design View und Ziehen der Resizer , ändert sich die Eingabehintergrundfarbe korrekt, wenn die Breitengrenzen erreicht sind.

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

Quelle

2013-05-21 23:32:34

Sie haben Recht, aus irgendeinem seltsamen Grund misst mein Chrom 900 Pixel obwohl Fenster 1000 Pixel ist. obwohl html und css genau gleich sind. Ich öffnete ein Fenster und legte beide Dokumente in zwei Registerkarten, um sicherzustellen, dass die Breite gleich ist. in meinem lokalen Dokument chrome Maßnahmen 900px :( – Tuan

+33

Verdammt, ich war dumm. Dieser Tab war auf Zoom-Ebene verbrachte Stunden auf diesem -_- Ich sollte so spät arbeiten ... danke! – Tuan

: D ... das ist eine schwierige Sache zu schau mal, wirklich! –

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

input { 
     background-color: green; 
    } 

}

Dies funktioniert, aber stellen Sie sicher, dass Sie das Zoomen überprüfen. (Ich habe diese Antwort von den Kommentaren, wie es scheint, das ist der große Fang hier in der Gegend .. Ich bin darauf auch gefallen)

Quelle

2016-10-21 14:14:51 Victor

Ich hatte das passiert mir von Zeit zu Zeit passieren. Stellen Sie sicher, dass Ihr Tab nicht gezoomt ist (⌘0)

Quelle

2017-05-30 17:36:25

CSS-Medienabfrage min-width nicht korrekt

Antwort

Verwandte Themen