Les Media Queries ne prévalent pas natif de styles?

Je me demandais pourquoi certains de mes requêtes de média ne sont pas prépondérantes, le natif de styles à la vue du port de leur appelé. Je suis en train de relooker un menu de réactivité, de la pile, et d'avoir la zone de navigation de la hauteur de plus dans un thème WP. Mais dans tous les sens-je ajouter les specs, j'ai créer pour obtenir cet effet par l'édition de Vivre CSS dans Safari ou FF inspecter l'élément - les styles-je insérer vertu de la fenêtre d'affichage, je suis de ciblage ne sont pas en cours de lecture. Je sais que je suis en utilisant des requêtes de média comme on le lit de NOUVEAUX styles, de ne pas remplacer les indigènes? Je suis absent quelque chose ici? Voici ce que j'essaye d'ajouter que de ne pas lire.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

#access li {
float:none; //To translate to not to float to the left stack
position:relative;
}

#access {
background:url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
clear:both;
display:block;
float:left;
height:240px; //Changed the height to allow stack
width:100%;
}

Edit: Voici la PLEIN ensemble de Réactif styles je vais appeler, si les questions.

  /* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
body {
padding: 0;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
#socialpost { margin-left: -100px; }
p {font-size: 12px; }
#sublogo { display: none; }
#footcontain {  padding-left: 0;}
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 20px;
text-decoration: none;
#access a { font-size: 12px; }
#access li {
float: left;
margin-left: -28px;
position: relative; }
}
@media (max-width: 650px) {
/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
body {
padding: 0;
}
#page {
margin-top: 0;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 12px; }
#sublogo { display: none; }
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 13px;
text-decoration: none;
font-size: 11px;}
#footcontain {  padding-left: 0;}
#access a {
padding: 0 15px; }
}
@media (max-width: 450px) {
#content .gallery-columns-2 .gallery-item {
width: 45%;
padding-right: 4%;
}
#content .gallery-columns-2 .gallery-item img {
width: 100%;
height: auto;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 48%; }
#footcontain {  padding-left: 0;}
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
.widget-title { margin-top: 35px; }
.flexslider .slides img {
border: 0 none;
display: block;
max-width: 100%;
padding-bottom: 25px; }
#footcontain {  display:none;}
#access li {
float: none;
position: relative;
}
#access {
height: 70px;
}
#access a {
color: #000000;
display: block;
font-family: arial;
font-weight: bolder;
line-height: 3.11em;
padding: 0 10px;
text-decoration: none;
}
#access ul {
font-size: 10px;
list-style: none outside none;
margin: 0 0 0 -80px;
padding-left: 0;
}
.flex-control-nav { display: none; }
.flexslider {
margin: 0 0 67px; }
.flex-caption {  display: none; } //Could Display this here, need to make take half of slider
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body { padding: 0; }
#access {
height: 70px;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
#sublogo { display: none; }
#access a { padding: 0 10px; }
#access li {
float: none;
position: relative;
}
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 35%; }
#footcontain {  display: none; }
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
#footcontain { display: none; }
.widget-title { margin-top: 35px; } //Attempt to Create Space for Slider Page Nation
#access { height: 70px; }
#access li {
float: none;
position: relative;
}
.flex-control-nav { display: none; }
.flex-caption {  display: none; } //Could Display this here, need to make take half of slider, check 
.flexslider {
margin: 0 0 67px; }
}
Vous dites que ça ne fonctionne pas, mais avez-vous réellement testé que sur un appareil? Vous avez indiqué qu'il n'est pas remplacer les styles de Chrome ou de Firefox - en général, je pense que "min-device-width" ne fonctionne que sur un appareil et pas dans le "navigateur de bureau".
Grand point. Mais je l'ai testé à l'aide de "Safari Resizer" - qui m'a dit était identique à l'iPad sur les bonnes résolutions. Et également utilisé populaires des émulateurs comme iPadpeek. Ceux-ci devraient être un peu précis?
Je pense que Safari Resizer n'affecte que la résolution du navigateur et vous permet de créer custom presets et ne change pas la façon dont Media Queries sont interprétés, veuillez vérifier ma réponse
Je vais essayer de voir si il s'affiche sur les dispositifs dès que je peux, et de garder la question à jour. MAIS, je suis confus que certaines Requêtes de Médias ne montrent avec fenêtre de redimensionnement.

OriginalL'auteur Peter Gibbons | 2012-01-23