Ortam Sorguları yerel stilleri geçersiz kılmıyor mu?

Question

Bazı medya sorgularımın neden arandığları görünüm bağlantı noktasında yerel stilleri geçersiz kılmadığını merak ediyorum. Bir menüyü duyarlı bir şekilde dinlemeye, yığınlara ayırmaya ve bir WP temasında gezinme alanının boyunun daha uzun olmasını sağlamaya çalışıyorum. Ancak, Safari veya FF inspect öğesinde Live CSS'yi düzenleyerek bu efekti elde etmek için oluşturduğum özellikleri her eklediğimde - hedeflediğim belirli viewport altında eklediğim stiller okunmuyor. Yeni stilleri okudukça medya sorgularını doğru şekilde kullanıyorum, yalnızca yerel ayarları geçersiz kılmıyor muyum? Burada bir şey eksik miyim? İşte eklemeye çalıştığım şey, okunamayacak.

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

Düzenleme: İşte konularda eğer, arayacağım Duyarlı stilleri TAM seti. Üst örnek üzerinde

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

bir cihaza özgü tarzı çünkü Yayınınızdan CSS kod çalışmıyor ve bir dizüstü/masaüstü kullanılarak Safari, Chrome veya Firefox üzerinde görüntülüyor. Media Queries'un bir tarayıcıda görüntülendiğinde farklı stilleri uygulama olasılığını unutacaksınız - 480px boyutunda ve bir iPhone'da (maksimum aygıt genişliği 480 piksele sahip).

Örnek CSS: Yukarıdaki örnekte

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

hem hedef ve hala seçim cihazınız için ayrı bir stili olabilir. Bir browser içinde test etmek isterseniz, min-width veya max-width özelliklerini kullanın.

Bu yardımcı olur umarım.

Answer 2

Eksik kapanış ayracı var.

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