媒体查询覆盖

Question

我将媒体查询设置为最大宽度 1000 像素、825 像素和 760 像素。一切正常，除了 760 像素媒体查询中的一行调整导航相对于徽标的填充，以便将导航链接移动到徽标下方，而不是默认对齐与徽标。 'Navigation' 注释下的最后一行才是问题所在。 -

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

除了此填充调整覆盖所有其他宽度较大的媒体查询外，页面上的其他所有内容都正确缩放。因此，导航在所有页面 window 尺寸中都位于徽标下方，而本应仅在 760px 尺寸中出现。我确定 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

最后应该关闭

媒体查询覆盖

Media Query overriding

html

css

media-queries