媒体查询重写

Question

我设立的1000像素，825px，760px和最大宽度媒体查询。一切工作正常，除了在调整相对于标识导航的填充760像素媒体查询一条线，以移动导航链接下面的标志，而不是默认的对准与标志。 这是“导航”这是问题的意见下的最后一行。 -

/* Navigation */ 
    nav { padding-top: 80px; } 
    nav > ul { padding-left: 10px; } 
    } 

一切是正确缩放页面上，除了这个填充调整是覆盖所有其他大宽度媒体查询。因此，导航在所有页面窗口尺寸下都低于徽标，而且只能在760像素的尺寸上显示。我相信有什么不对的760px查询，是因为当我删除它来测试尺寸较大的，他们像预期的那样，与标识一致的导航。

/* Media Queries */ 

@media screen and (max-width: 1000px) { 

    h1 { font-size: 2.4em; } 

    /* Header */ 
    header div.hero { left: 56%; } 
    header div.hero h1{ margin-bottom: 20px; } 

    /* Section-Atmosphere */ 
    section.atmosphere article { padding-left: 400px; background-size: 375px auto; } 

} 

@media screen and (max-width: 825px) { 

    h1 { font-size: 2.2em; } 

    /* Header */ 
    header { height: 300px; background-image: url(../images/banner_825.jpg); } 
    header div.hero { top:120px; left:48%; } 

    /* Section - Atmosphere */ 
    section.atmosphere article { padding-left: 325px; background-size: 300px auto; } 

    /* Section- How To */ 
    section.how-to blockquote p.quote { font-size: 1.1em; line-height: 1.2em; } 
    section.how-to blockquote p.credit { font-size: .85em; } 
} 


@media screen and (max-width: 760px) { 
    h1 { font-size: 1.8em; } 
    h2 { font-size: 1.4em; } 
    h3 { font-size: 1.1em; } 
    a.btn { font-size: 1em; } 
} 

/* Header */ 

header a.logo { width: 145px;height: 60px; } 
header div.hero { top: 140px; left:48%; } 

/* Section - Main */ 
section.main { margin-top: 10px; margin-bottom: 10px; } 
section.main aside div.content { background-size: 55px 55px; padding-top: 60px; } 


/* Section- How To */ 
section.how-to aside div.content img { width: 85%; } 

/* Navigation */ 
nav { padding-top: 80px; } 
nav > ul { padding-left: 10px; } 
} 

Answer 1

看起来像是在关闭@ media-query之前的打算。

@media screen and (max-width: 760px) { 
    h1 { font-size: 1.8em; } 
    h2 { font-size: 1.4em; } 
    h3 { font-size: 1.1em; } 
    a.btn { font-size: 1em; } 
} // closed here 

它应该在最后关闭。