Zapytania o media, które nie zastępują stylów natywnych?

Question

Zastanawiam się, dlaczego niektóre z moich zapytań o media nie przesłaniają natywnych stylów w porcie widoku, w którym zostały wywołane. Staram się restylezować menu w sposób responsywny, układać w stosy i mieć dłuższy czas w obszarze nawigacji w kompozycji WP. Ale w każdym razie dodam specyfikacje, które tworzę, aby uzyskać ten efekt, edytując Live CSS w Safari lub element inspekcji FF - style, które wstawiam pod konkretną rzutnią, na którą celuję, nie są czytane. Wiem, że poprawnie używam zapytań o media, ponieważ czyta NOWE style, po prostu nie zastępuje natywnych? Brak mi czegoś tutaj? Oto, co próbuję dodać, ale nie przeczytam.

@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: Oto PEŁEN zestaw stylów Responsive Dzwonię, jeśli sprawach.

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

CSS kod z Twojego postu nie działa, ponieważ jest to urządzenie specyficzny styl i oglądania go na Safari, Chrome lub Firefoksa za pomocą laptopa/pulpitu. Zapominasz, że Media Queries daje ci możliwość stosowania różnych stylów, gdy strona jest wyświetlana w "przeglądarce" - rozmiar do 480 pikseli i na iPhonie (który ma maksymalną szerokość urządzenia - 480 pikseli).

Przykład 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; 
    } 
} 

W powyższym przykładzie można kierować zarówno i nadal mieć oddzielny styl dla swojego urządzenia z wyboru. Jeśli chcesz przetestować go w wersji browser, po prostu użyj właściwości min-width lub max-width.

Mam nadzieję, że to pomoże.

Answer 2

Na najwyższym przykład istnieje nawias zamykający brakuje .

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