Question

我设置了最大宽度为1000px，825px和760px的媒体查询。一切正常，除了760 px媒体查询中的一行调整导航相对于徽标的填充，以便移动下面的导航链接徽标，而不是默认的对齐与徽标。这是导航＆＃39;评论中的最后一行。这就是问题所在。 -

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

除了此填充调整覆盖所有其他更大宽度的媒体查询外，其他所有内容都在页面上正确缩放。因此，导航在所有页面窗口大小下都低于徽标，当它应该只发生在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

应该在结束时关闭。

媒体查询覆盖

1 个答案: