Le query multimediali non sovrascrivono gli stili nativi?

Question

Mi chiedo perché alcune delle mie query sui media non stiano ignorando gli stili nativi nella vista in cui viene chiamata. Sto cercando di ridimensionare un menu in modo reattivo, di impilarlo e di avere l'altezza dell'area di navigazione più lunga in un tema WP. Ma ad ogni modo aggiungo le specifiche che creo per ottenere questo effetto modificando Live CSS in Safari o FF inspect element - gli stili che inserisco sotto la viewport specifica che sto tagliando non vengono letti. So che sto usando correttamente le media query mentre legge i NUOVI stili, semplicemente non sovrascrive nativo? Mi manca qualcosa qui? Ecco cosa sto cercando di aggiungere che non leggerà.

@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: Ecco il PIENA insieme di stili Responsive chiamo, se le cose.

/* =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; } 

} 

Answer 1

Il codice CSS dal tuo post non funziona perché è uno stile specifico del dispositivo e si sta visualizzando su un Safari, Chrome o Firefox utilizzando un laptop/desktop. Stai dimenticando che Media Queries ti dà la possibilità di applicare diversi stili quando una pagina viene visualizzata in un "browser", ridimensionato a 480px e su un iPhone (che ha una larghezza massima di 480px).

Esempio CSS:

/* max-width */ 
@media screen and (max-width: 480px) { 
    .one { 
     background: #F9C; 
    } 
} 

/* min-width & max-width */ 
@media screen and (min-width: 480px) and (max-width: 900px) { 
    .two { 
     background: #9CF; 
    } 
} 

/* min-width */ 
@media screen and (min-width: 900px) { 
    .three { 
     background: #F90; 
    } 
} 

/* iphone specific css */ 
@media screen and (max-device-width: 480px) { 
    .iphone { 
     background: #ccc; 
    } 
} 

Nell'esempio di cui sopra è possibile bersaglio sia e hanno ancora uno stile separato per il dispositivo di scelta. Se si desidera testarlo in un browser basta usare le proprietà min-width o max-width.

Spero che questo aiuti.

Answer 2

Sulla sommità esempio c'è una mancanza parentesi di chiusura.

@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%; 
    } 
}