CSS Media Query min-width ne fonctionne pas correctement
J'ai un code HTML comme:
<!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>
et mon CSS est:
input {
background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
maintenant, le CSS s'applique lorsque la fenêtre est à la 909px largeur. Évidemment pas de barre de défilement problème. Je suis devenir fou avec ce problème plus simple. Je l'ai testé avec Chrome et IE10 fois la même.
Quelqu'un peut s'il vous plaît aider ce que je fais de mal ici?
OriginalL'auteur Tuan | 2013-05-21
Vous devez vous connecter pour publier un commentaire.
J'ai utilisé ce code HTML:
Avec une simple requête de média déclaration comme celle-ci:
C'est vraiment génial de travailler ici: http://jsbin.com/ubehoy/1
Débogage avec Firefox Responsive Design Vue et en faisant glisser le resizer, ça change de l'entrée la couleur de fond correctement lorsque la largeur limites sont atteintes.
Essayé avec Chrome 26.0.1410.64 m/IE 10, et ça fonctionne très bien aussi.
big upvote pour @user1974505 j'ai eu le même stupide de zoom à 110%. Dès que je l'ai lu, j'ai fait un /facepalm et de réinitialiser les paramètres par défaut... fonctionne comme un charme!
J'ai eu exactement le même problème. Et oui, la loupe est sur! Ne sais pas qui aurait une incidence sur les pixels de la largeur de la page.
Loupe échouer pour moi aussi... 🙁
Juste pour dire que le zoom était vraiment démolition moi et je suis sûr que je n'aurais pas vu cela sur mon propre, merci!
OriginalL'auteur Leniel Maccaferri
J'ai eu ceci m'arrive de temps à autre. Assurez-vous que votre onglet n'est pas un zoom avant (⌘0)
OriginalL'auteur Zach Parduhn
Cela fonctionne, mais assurez-vous de vérifier le zoom. (J'ai eu cette réponse dans les commentaires, il semble que ce soit le big catch ici.. je suis tombé pour elle aussi)
OriginalL'auteur Victor