CSS Query Mediów min-width nie działa poprawnie

Mam HTML jak:CSS Query Mediów min-width nie działa poprawnie

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

i mój CSS:

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

teraz CSS obowiązuje, gdy okno jest 909px szerokości. Oczywiście nie jest to pasek przewijania. Dostaję orzechy od tego prostego problemu. Testowałem to z Chrome i IE10 tak samo.

Czy ktokolwiek może pomóc w tym, co robię źle?

Źródło

2013-05-21 Tuan

użyłem tego 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>

Dzięki prostszej mediów deklaracji zapytania jak ten:

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

input { 
     background-color: green; 
    } 

}

To działa świetnie tutaj: http://jsbin.com/ubehoy/1

debugowanie z Firefox Responsive Design View i przeciągając Resizer , zmienia prawidłowo kolor tła wejściowego po osiągnięciu limitów szerokości.

Próbowałem z Chrome 26.0.1410.64 m/IE 10 i działa również świetnie.

Źródło

2013-05-21 23:32:34

masz rację, z jakiegoś dziwnego powodu mój chrom mierzy 900 pikseli, chociaż okno ma 1000 pikseli. chociaż html i css są dokładnie takie same. Otworzyłem okno, w którym umieszczono oba dokumenty w dwóch zakładkach, aby zapewnić, że szerokość jest taka sama. w moim lokalnym dokumencie chrom mierzy 900px :( – Tuan

+33

Cholera, byłem głupi, ta zakładka była na poziomie powiększenia spędził godziny na tym -_- powinienem pracować tak późno ... dzięki! – Tuan

: D ... to jest trudne spójrz na, naprawdę! –

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

input { 
     background-color: green; 
    } 

}

Działa to, ale upewnij się, że sprawdzasz powiększenie. (Otrzymałem tę odpowiedź z komentarzy, ponieważ wydaje się, że jest to wielki haczyk tutaj .. Ja też na to spadłem)

Źródło

2016-10-21 14:14:51 Victor

Od czasu do czasu zdarzało mi się to przydarzyć. Upewnij się, że twoja karta nie jest powiększona (⌘0)

Źródło

2017-05-30 17:36:25

CSS Query Mediów min-width nie działa poprawnie

Odpowiedz

Powiązane problemy