メディアクエリーが誤った構文で読み取られています

Question

私は、誤って指定のモバイルビューポートでメディアクエリーに適切な構文を削除しました。これは正しく表示されていますが、これは素晴らしいですが、正しい構文を使用したいと思います。なぜ、どのように発生しているのか知りたいのです。以下は関連するスタイルです。私は「@media only screen and (min-width: 320px) and (max-width: 480px)」すべての私のメディアクエリの最後に追加{を残したら

/* Smartphones (Landscape) ----------- */ 
@media only screen and (min-width: 320px) and (max-width: 480px) 

    ul.ui-tabs-nav li.ui-state-active a { 
    background-color: #C6C699; 
    height: 17px; 
    text-shadow: none; 
    width: 77px; 
    } 

    .content .full header, .content .full .entry-summary, .content .full .entry-content, .content .full .entry-meta, .content .full .edit-link { 
    margin-top: 3px; 
    padding: 15px; 
    width: 100%; 
    } 

    #topbgimg { display: none; } 

    #topvidarea { 
    margin-left: 21%; 
    margin-right: 20%; 
    margin-top: -5px; 
    max-width: 400px; 
    } 

    #topmenucontain { display: none; } 

    .fmenu { display: none; } 

    #clogo { display: none; } 

    #youtube1, #youtube2 { display: none; } 

    #wrapper { 
     margin: 0 1em; 
    } 

    h1 { 
     font-size: 2em; 
    } 

    #logoimg { display: none; } 

    #notification { 
    height: 200px; 
    margin: 0; 
    width: 100%; 
    padding-top:20px; 
    } 

    .ui-tabs .ui-tabs-nav li a { 
    border: 3px solid white; 
    color: white; 
    } 

    #branding { 
     width: 100%; 
     padding: 1em 0; 
     margin: 0; 
     text-align: center; 
    } 

    #topbtn, #topbtn2, #topbtn3 { 
    width: 75px; 
    } 

    #topbtnbuy { 
    background: none repeat scroll 0 0 #C6C699; 
    border: 1px solid #C6C699; 
    color: #333333; 
    display: inline; 
    float: left; 
    font-family: Georgia; 
    font-size: 12px; 
    height: 42px; 
    margin-right: 10px; 
    margin-top: -1px; 
    width: 25%; 
    } 

    a.box:link { 
    min-width: 70%; 
    } 

    nav#access { 
    border-bottom: 1px dashed #CFCFCF; 
    position: relative; 
    text-align: center; 
    } 

    nav#access ul.menu li:nth-child(n+5) { 
    display: none; 
    } 

    .content { 
    min-height: 0; 
    background-image: none !important; 
    border-bottom: 1px dashed #CFCFCF; 
    } 

    /* Hide Background & Overlay Images */ 
    .overlay { 
    display: none; 
    } 

    .has-background { 
    min-height: 0; 
    } 

    .content header, .content .entry-summary, 
    .content .entry-content, .content .edit-link, 
    footer.entry-meta { 
    width: 100%; 
    } 

    .content header, .has-background header { 
    margin-top: 2em; 
    } 

    .content header h2 a, .single .content header h2 { 
    font-size: 2em; 
    } 

    .content section.right, 
    .content section.left, 
    .content section.full, 
    .content section.center { 
     padding: 0; 
    } 

    .content section.center header, 
    .content section.center .entry-summary, 
    .content section.center .entry-content, 
    .content section.center .edit-link, 
    .content section.center footer.entry-meta, 
    .content section.right header, 
    .content section.right .entry-summary, 
    .content section.right .entry-content, 
    .content section.right .edit-link, 
    .content section.right footer.entry-meta { 
     left: 0; 
    } 

    #comments { 
     margin: 1em 0; 
    } 

    #comment, #commentform input, 
    #commentform #submit, #commentform #comment { 
     width: 416px; 
    } 

    .commentlist { 
     width: 424px; 
    } 

    #commentform #submit { 
     width: 430px; 
    } 
    #comments, #commentform #comment-reply { 
     width: 100%; 
    } 

    .cat-links, .entry-meta .sep:nth-child(n+4), 
    .comments-link, .edit-link { 
     display: none; 
    } 

    /* Footer */ 
    #footer { 
     width: 100%; 
     padding: 1em 0; 
    } 

    #footer-widgets { 
     margin-bottom: 1em; 
    } 

    #footer .widget { 
     width: 45%; 
     margin: 0.5em 0; 
    } 

    .third-box { 
     width: 89%; 
    } 

    #buybutton { width: 95%; } 

    .scrolldowntext { margin-top: 40px; } 

    #notification { 
    background-color: #333333; 
    border-bottom: 5px solid #C6C699; 
    font-size: 22px; 
    height: 200px; 
    padding-top: 20px; 
    position: absolute; 
    width: 100%; 
    z-index: 9990; 
    } 

    #topcaption { 
    display: none; 
    } 

    #logoimg { display: none;} 

    #topmenucontain { 
    margin: -33px auto 0; 
    width: 50%; } 

    a.box:link { 
    color: #C6C699; 
    display: inline; 
    float: left; 
    font-family: Georgia; 
    font-size: 12px; 
    height: 50px; 
    margin-right: 10px; 
    min-width: 75px; 
    } 

    #videoscreenshot { height: 215px; width: 100%; } 

    .fancybox-iframe { display: hidden; } 

} 

読まれていましたか？

更新：はいくつかのスタイルはどんなだった場合には適切にゼロからスタートしようとする試みには、ビューポート上で指定した範囲内のすべてのスタイルを削除してみました。 しかし、開始時に、私は単にビューポート内のトップメニューを隠そうとしています。これは無視され、何らかの理由でレンダリングされませんか？

/* Smartphones (Landscape) ----------- */ 
@media only screen and (min-width: 320px) and (max-width: 480px) { 


#topvidarea { 
    margin-left: 24%; 
    margin-right: 20%; 
    margin-top: -265px; 
    max-width: 400px; 
} 

#topmenucontain { display: none; } 

} 

Answer 1

あなたのメディアクエリーには開口部ブラケットを持っていませんが、あなたは閉じて1を持っている：

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

あなたが適切にあなたの最初のクエリを閉じていなかったので、おそらく読まれている他のすべてのメディアクエリしたがって、クエリはどこで開始し終了するのか分からなかった。