メディアクエリはネイティブスタイルをオーバーライドしませんか？

Question

私のメディアクエリのいくつかが、呼び出されているビューポートでネイティブスタイルをオーバーライドしていないのはなぜかと思います。私は積極的にメニューを再レイアウトしようとしており、WPテーマでナビゲーション領域の高さを長くしています。しかし、SafariやFFのinspect要素でLive CSSを編集して、この効果を得るために作成する仕様を追加すると、ターゲットの特定のビューポートに挿入するスタイルは読み込まれません。私はそれが新しいスタイルを読み込むのでメディアのクエリを正しく使用していることを知っています、ネイティブをオーバーライドしませんか？私はここに何かを逃している？ここに私が追加しようとしているものは、読まないものです。

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

編集：事項場合はここで、私が呼んでいる応答スタイルのFULLセットです。トップの例で

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

それは、デバイス固有のスタイルだとあなたがラップトップ/デスクトップを使用してサファリ、クロムまたはFirefoxでそれを見ているので、あなたのポストからCSSコードが機能していません。 Media Queriesは、ページが「ブラウザ」に表示されているときに異なるスタイルを適用する可能性があることを忘れています（480pxおよびiPhone（最大デバイス幅は480pxです））。

例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; 
    } 
} 

あなたは両方をターゲットに、まだ選択のあなたのデバイス用に別のスタイルを持つことができ、上記の例では。 browserでテストする場合は、min-widthまたはmax-widthのプロパティを使用してください。

これが役に立ちます。

Answer 2

行方不明閉じ括弧があります。

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