CSS media query min-width non funziona correttamente

Ho un HTML come:CSS media query min-width non funziona correttamente

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

e il mio CSS è:

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

ora il CSS si applica quando la finestra è a 909px di larghezza. Ovviamente non è un problema con la barra di scorrimento. Sto diventando pazzo con questo semplice problema. L'ho provato con Chrome e IE10 entrambi uguali.

Qualcuno può aiutare per favore cosa sto facendo male qui?

fonte

2013-05-21 Tuan

ho usato questo 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>

Con un semplice supporto dichiarazione di query come questa:

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

input { 
     background-color: green; 
    } 

}

Sta funzionando grande qui: http://jsbin.com/ubehoy/1

Debug con Firefox Responsive Design View e trascinando il resizer , cambia il colore di sfondo dell'input correttamente quando vengono raggiunti i limiti di larghezza.

Provato con Chrome 26.0.1410.64 m/IE 10 e funziona anche bene.

fonte

2013-05-21 23:32:34

hai ragione, per qualche strana ragione il mio cromo misura 900 pixel anche se la finestra è 1000 pixel. anche se html e css sono esattamente gli stessi. Ho aperto una finestra e ho inserito entrambi i documenti in due schede per garantire che la larghezza sia la stessa. nel mio documento locale chrome misure 900px :( – Tuan

+33

Dannazione ero stupido, quella scheda era al livello di zoom trascorso ore su questo -_- dovrei lavorare così tardi ... grazie! – Tuan

: D ... questa è una cosa difficile da guarda, davvero! –

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

input { 
     background-color: green; 
    } 

}

Questo funziona, ma assicurati di controllare lo zoom. (Ho ricevuto questa risposta dai commenti, perché sembra che questa sia la grande presa da queste parti .. Sono caduto anche per questo)

fonte

2016-10-21 14:14:51 Victor

Mi è capitato di tanto in tanto. Assicurati che la tua scheda non sia ingrandita (⌘0)

fonte

2017-05-30 17:36:25

CSS media query min-width non funziona correttamente

risposta

Problemi correlati