미디어 쿼리가 잘못된 구문으로 읽혀졌습니다.

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

당신은 미디어 쿼리에는 여는 괄호가없는 있지만, 당신은 할 하나의 폐쇄 :

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

제대로 첫 번째 쿼리를 폐쇄하지 않았기 때문에 아마 읽고있는 모든 다른 미디어 쿼리를 따라서 질의는 어디서 시작하고 끝낼 지 알지 못했다.