正在使用错误语法读取媒体查询

Question

一旦我意外地在所述移动视口中遗漏了我的媒体查询的一些正确语法。它显示正确，这真棒，但我想要使用正确的语法，并且很想知道为什么/如何发生这种情况。以下是涉及的风格。

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

} 

一旦我离开了额外{在“@media only screen and (min-width: 320px) and (max-width: 480px)” 我所有的媒体查询结束时被读取？

更新：只是试图消除上述视口内指定的所有风格，试图从头开始正常的情况下，一些风格是什么。 但是，在开始时，我只是试图隐藏视口中的顶层菜单。这被忽略了，而不是出于某种原因渲染？

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

您的媒体查询没有开括号，但你确实有一个关闭一个：

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

那里可能被阅读，因为你没有正确关闭第一个查询所有其他媒体查询，因此查询不知道从哪里开始和结束。